如何入手Flutter
- Flutter的推出已經(jīng)很久了，作為一個(gè)Android開發(fā)，遲遲停留在看官方文檔而不愿意動(dòng)手，下面我們就來初步學(xué)習(xí)flutter自定義ViewGroup布局吧。
- 定一個(gè)小demo的目標(biāo)，當(dāng)你擬定了目標(biāo)后，在開始做demo的時(shí)候就會(huì)遇到各種各樣的問題。在遇到問題中肯定會(huì)不管查閱各種資料，從copy別人代碼，到后面通過程序員的敏銳的觀察力，觀察出這種功能類型的代碼大同小異呀。
- 總結(jié)出經(jīng)驗(yàn)后開始自己動(dòng)手寫一個(gè)功能性的類。
自定義ViewGroup前提
- Flutter沒有像android一樣有addView和removeView等操作的，所以對(duì)比實(shí)現(xiàn)android這種添加/移除 View的操作，在flutter里面就要依賴變量值和setState方法了。
- 在Flutter中隨處可見各種的各種ViewGroup(Container,Center……)都有接受一個(gè)叫child的參數(shù)，這個(gè)參數(shù)實(shí)際就是往ViewGroup里面添加子View的做法。
- flutter的構(gòu)造參數(shù)要想生效，必須在修改變量值后調(diào)用setState觸發(fā)View Tree的重新繪制，相當(dāng)于android的requestLayout方法。
開始自定義布局
- 這里我需要的效果圖就是剛進(jìn)來頁面出現(xiàn)一個(gè)loading圖+文字效果。因?yàn)檫@里是剛進(jìn)頁面時(shí)候就要出現(xiàn)loading圖，所以不能用showDialog（因?yàn)閂iewTree還沒完全構(gòu)建好）。
- 首先看我們定義的類與構(gòu)造參數(shù)。
下面@required注解的就是必要參數(shù)，類似你用Container不輸入child參數(shù)會(huì)報(bào)錯(cuò)一樣。
class MyLoadingWidget extends StatelessWidget {
@required Widget child;
@required bool isShow;
String text;
……
//這里的child就是ViewGroup里面的子View
//isShow就是控制loading視圖隱藏 or 出現(xiàn)的參數(shù)
//text就是loading控件下方的文字
MyLoadingWidget({ Key key, this.child, this.isShow, this.text})
: assert(child != null),
super(key: key);
……
}
- 當(dāng)我們定義好一個(gè)類的構(gòu)造函數(shù)后，這個(gè)ViewGroup就基本成型了。剩下一半就是Build方法里了。flutter的Build方法類似于ViewGroup的layout方法，所以flutter的Build方法就是用于如何擺放你的子View。我這里需求要的是子View在下面，上面來個(gè)半透明的遮罩，然后有個(gè)loading+文字的效果，類比android的FrameLayout里面套兩個(gè)娃。flutter里的Stack類似FrameLayout的ViewGroup，Stack接受的參數(shù)其中之一就是List<Widget>,就好比android的xml多層嵌套一樣。
廢話說了一堆，讓我們開始上代碼：
該類代碼
@override
Widget build(BuildContext context) {
// children是自定義ViewGroup用來裝子View，這里把外部的子View先添加進(jìn)來
children.add(child);
//isShow用來判斷移除Loading圖的時(shí)機(jī)。
if (isShow) {
//這里就開始創(chuàng)建半透明遮罩的子View了。然后添加進(jìn)children數(shù)組里。
//SizedBox.expand控制寬高占滿全屏
children.add(SizedBox.expand( //
child: new Container(
decoration: ShapeDecoration(
color: Colors.black54,
shape: RoundedRectangleBorder(),
),
child: new Center( //保證控件居中效果
child: new SizedBox(
width: 120.0,
height: 120.0,
child: new Container(
decoration: ShapeDecoration(
color: Color(0xffffffff),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: new Text(
text,
style: new TextStyle(fontSize: 12.0),
),
),
],
),
),
),
),
)// 創(chuàng)建透明層
));
}
//當(dāng)添加子View后，把children數(shù)組給Stack構(gòu)建出View視圖。
return Stack(children: children);
}
-
上面代碼雖然看起來很長，但是絕對(duì)比android簡單千萬倍。就是一個(gè)視圖的擺放問題。當(dāng)我們定義完成這個(gè)類后，實(shí)際上它就和Container一模一樣的用法，只不過里面的功能不一樣而已。
自定義ViewGroup用法
更新構(gòu)造參數(shù)的變量
效果圖
效果圖
總結(jié)
- 以上純粹是我自己在Flutter學(xué)習(xí)的理解，如果存在錯(cuò)誤的理解希望大家能明確指出。我自己該項(xiàng)目的地址demo，我自己的demo是做一個(gè)圖文本地存儲(chǔ)的筆記本而已，如果大家喜歡不妨點(diǎn)個(gè)??。
- flutter的學(xué)習(xí)上我覺得還是要多動(dòng)動(dòng)小手，其實(shí)真的不難，只要有個(gè)目標(biāo)后就能一步步寫出flutter的代碼了。
