Flutter七日游第三天：2018-12-18 天氣：晴朗

零、前言

浪了兩天，Dart語(yǔ)法基本上熟悉了，繪圖也不怕了，現(xiàn)在進(jìn)入正軌，繼續(xù)浪~
今天來(lái)學(xué)些枯燥的東西了--基礎(chǔ)控件，戒驕戒躁，基礎(chǔ)還是要好好掌握。
本文目的在于盡可能看清控件的全局(細(xì)枝末節(jié)點(diǎn)到為止),詳細(xì)用法等布局實(shí)戰(zhàn)再細(xì)說(shuō)吧
本文能用圖的，盡量不用字(看完你可能會(huì)覺得我腦洞有點(diǎn)大)，廢話不多說(shuō)，進(jìn)入今天的內(nèi)容

---

一、Widget簡(jiǎn)入

Widget:[小器具，裝飾品，窗口小部件],以后簡(jiǎn)稱：控件
下面看一下Widget樹：(只延伸到下代)

Widget樹.png

---

1.StatelessWidget和StatefulWidget

目前出現(xiàn)在我眼前的只這有兩個(gè)，所以先只看這兩個(gè):

StatelessWidget：源碼第一句話： ---->A widget that does not require mutable state. ---->一個(gè)不需要變動(dòng)狀態(tài)的控件StatefulWidget ：源碼第一句話： ---->A widget that has mutable state. ---->一個(gè)可變動(dòng)狀態(tài)的控件 

---

2.StatelessWidget一共就有三個(gè)方法:

StatelessWidget.png

-------->[構(gòu)造方法，需要一個(gè)key,而且老爸已經(jīng)給他了]---- /// Initializes [key] for subclasses. const StatelessWidget({ Key key }) : super(key: key);-------->[createElement方法復(fù)寫Widget方法，使用StatelessElement--tag1--自給自足] /// It is uncommon for subclasses to override this method. //子類重寫此方法是不常見的。----所以就不要沒(méi)事找事了 StatelessElement createElement() => StatelessElement(this);--tag1-->[StatelessElement,接收一個(gè)StatelessWidget] /// An [Element] that uses a [StatelessWidget] as its configuration. class StatelessElement extends ComponentElement {/// Creates an element that uses the given widget as its configuration. StatelessElement(StatelessWidget widget) : super(widget);-------->[使用現(xiàn)在要關(guān)注的只有：build方法--] /// Describes the part of the user interface represented by this widget. //描述此控件呈現(xiàn)在用戶界面上的部分 @protected Widget build(BuildContext context);//空實(shí)現(xiàn) 

---

3.初始項(xiàng)目看StatelessWidget:

StatelessWidget映入眼簾，可見該類內(nèi)部一定有一個(gè)build方法返回一個(gè)Widget

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.lightBlue, ), home:MyHomePage(title: 'Flutter Demo Home Page'), ); } }//不難看出MaterialApp是一個(gè)Widget，而且至少有title，theme，home三個(gè)屬性 而且home傳入的是一個(gè)Widget 

---

4.恭喜達(dá)成成就：Widget源碼偷窺者, 成就獎(jiǎng)勵(lì)：三張卡片：

卡片初始屬性：見白框(PS:屬性會(huì)隨著你的閱歷變多哦)

-	-	-

---

二、Flutter卡牌游戲Start

接下來(lái)會(huì)列出一長(zhǎng)串屬性，并挑選些簡(jiǎn)單的屬性測(cè)試一下
如果你覺得及其無(wú)聊，列屬性的地方可以跳過(guò),基本上每三個(gè)做一個(gè)小測(cè)試

1：MaterialApp--材料App

An application that uses material design.源碼如是說(shuō):一個(gè)使用材料設(shè)計(jì)的App
繼承自StatefulWidget，字段蠻多的,先列一下，看看現(xiàn)在用到的，其他的用到再說(shuō)吧。

class MaterialApp extends StatefulWidget this.navigatorKey, this.home,//--->tag1<--- this.routes = const <String, WidgetBuilder>{}, this.initialRoute, this.onGenerateRoute, this.onUnknownRoute, this.navigatorObservers = const <NavigatorObserver>[], this.builder, this.title = '',//--->tag2<--- this.onGenerateTitle, this.color, this.theme,//--->tag3<--- this.locale, this.localizationsDelegates, this.localeListResolutionCallback, this.localeResolutionCallback, this.supportedLocales = const <Locale>[Locale('en', 'US')], this.debugShowMaterialGrid = false, this.showPerformanceOverlay = false, this.checkerboardRasterCacheImages = false, this.checkerboardOffscreenLayers = false, this.showSemanticsDebugger = false, this.debugShowCheckedModeBanner = true,//--->tag1<---[title是個(gè)字符串]---- /// This value is passed unmodified to [WidgetsApp.title]. final String title;//--->tag2<---[theme是個(gè)ThemeData對(duì)象:保存材料設(shè)計(jì)主題的顏色和版式值]---- /// The colors to use for the application's widgets. final ThemeData theme;//--->tag3<---[home是個(gè)Widget對(duì)象]---- /// {@macro flutter.widgets.widgetsApp.home} final Widget home; 

---

2.Scaffold--腳手架

什么是腳手架，大概就是這個(gè)感覺吧，也就是輔助腳手的工具，方便施工

腳手架.png

PreferredSizeWidget this.appBar, Widgetthis.body, Widgetthis.floatingActionButton, FloatingActionButtonLocationthis.floatingActionButtonLocation, FloatingActionButtonAnimatorthis.floatingActionButtonAnimator, List<Widget>this.persistentFooterButtons, Widgetthis.drawer, Widgetthis.endDrawer, Widgetthis.bottomNavigationBar, Widgetthis.bottomSheet, Color this.backgroundColor, boolthis.resizeToAvoidBottomPadding = true, boolthis.primary = true, 

---

3：AppBar--App的Bar

就像安卓的ToolBar一樣的控件

Widgetthis.leading, boolthis.automaticallyImplyLeading = true, Widgetthis.title, List<Widget>this.actions, Widgetthis.flexibleSpace, PreferredSizeWidget this.bottom, doublethis.elevation = 4.0, Color this.backgroundColor, Brightnessthis.brightness, IconThemeData this.iconTheme, TextTheme this.textTheme, boolthis.primary = true, boolthis.centerTitle, doublethis.titleSpacing = NavigationToolbar.kMiddleSpacing, doublethis.toolbarOpacity = 1.0, doublethis.bottomOpacity = 1.0, 

---

新手任務(wù)1：能力小測(cè)試：

測(cè)試.png

MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.lightBlue, ), home: Scaffold( appBar: AppBar( title: Text("張風(fēng)捷特烈"),//標(biāo)題 backgroundColor: Color(0xffcbf231), //背景色 elevation: 12,//陰影 centerTitle: true, toolbarOpacity: .4)//透明度 )); 

新手任務(wù)完成，獎(jiǎng)勵(lì)卡片：歡迎繼續(xù)冒險(xiǎn)

-	-	-

---

4：Text--文字

 const Text(this.data, { TextStyle this.style, TextAlign this.textAlign, TextDirection this.textDirection, Localethis.locale, boolthis.softWrap, TextOverflowthis.overflow, doublethis.textScaleFactor, int this.maxLines, Stringthis.semanticsLabel,/// Creates a text widget with a [TextSpan]. const Text.rich(this.textSpan, { //同上 }) 

//---->[TextStyle]---------------- boolthis.inherit = true, Color this.color, doublethis.fontSize, FontWeightthis.fontWeight, FontStyle this.fontStyle, doublethis.letterSpacing, doublethis.wordSpacing, TextBaselinethis.textBaseline, doublethis.height, Localethis.locale, Paint this.foreground, Paint this.background, List<ui.Shadow> this.shadows, TextDecorationthis.decoration, Color this.decorationColor, TextDecorationStyle this.decorationStyle, Stringthis.debugLabel, StringString fontFamily,//---->[TextAlign]---------------- enum TextAlign { left,right,center,justify,start,end, }//---->[TextOverflow]---------------- enum TextOverflow { clip,fade,ellipsis, } 

---

5.FloatingActionButton--浮動(dòng)動(dòng)作按鈕

Widgetthis.child, Stringthis.tooltip, Color this.foregroundColor, Color this.backgroundColor, Objectthis.heroTag = const _DefaultHeroTag(), doublethis.elevation = 6.0, doublethis.highlightElevation = 12.0, VoidCallback@required this.onPressed, boolthis.mini = false, ShapeBorder this.shape = const CircleBorder(), Clipthis.clipBehavior = Clip.none, MaterialTapTargetSize this.materialTapTargetSize, boolthis.isExtended = false, 

6.Icon--圖標(biāo)

doublethis.size, Color this.color, Stringthis.semanticLabel,------This label does not show in the UI. TextDirection this.textDirection, 

新手任務(wù)2：

Text FloatingActionButton.png

body: Text( "一簫一劍平生意，負(fù)盡狂名十五年", maxLines: 1, overflow: TextOverflow.fade, style: TextStyle( color: Colors.blue, fontSize: 20, letterSpacing: 10, fontWeight: FontWeight.bold, background: Paint()..color = Colors.amberAccent), ), floatingActionButton: FloatingActionButton( backgroundColor: Colors.deepOrangeAccent, elevation: 12, highlightElevation: 24, onPressed: () {}, tooltip: 'Increment', child: Icon(Icons.add,size: 40,color: Colors.white,semanticLabel:"toly"), ), 

---

三、基礎(chǔ)控件點(diǎn)將臺(tái)(1)

以上6張卡片是初始項(xiàng)目中的控件,通過(guò)新手任務(wù)基本上更加熟悉了一些
Flutter還有哪些控件，建議看一下Flutter中文網(wǎng)，羅列的挺好的，下面一起學(xué)習(xí)一下
(PS:看了一下，真是多如雞毛...嚇得我不知從何入手)

所謂`打蛇打七寸,擒賊先擒王`,小兵之后再收拾 通過(guò)Android和html+css，我領(lǐng)悟到，對(duì)于界面設(shè)計(jì)者而言，布局是至關(guān)重要的,所以先看容器 

1.Layout布局容器之Row+Column--行+列

Row和Column.png

---

1.1:Row的基礎(chǔ)認(rèn)知

---->[源碼注釋第一句]----------------------------- A widget that displays its children in a horizontal array. 一個(gè)以水平數(shù)組的形式顯示其子部件的Widget。 Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline textBaseline, List<Widget> children = const <Widget>[], 

1.2：基本使用

children看來(lái)是一個(gè)Widget數(shù)組，想想也不難理解，畢竟做大哥的，當(dāng)然要有不少小弟啦
注：為了方便修改，以下代碼把Scaffold的body屬性值抽成變量使用

var row_test = Row( children: <Widget>[ Text('絕域從軍計(jì)惘然，,'), Text('東南幽恨滿詞箋。'), Text('一簫一劍平生意，'), Text('負(fù)盡狂名十五年。'), ], ); 

越界提醒.png

可以看出越界有提醒，感覺蠻有心的,水平排列沒(méi)毛病

---

1.3.Column：用法基本上差不多

---->[源碼注釋第一句]-----------------------------A widget that displays its children in a vertical array. 一個(gè)以豎直數(shù)組的形式顯示其子部件的Widget。Column({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize mainAxisSize = MainAxisSize.max, CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection = VerticalDirection.down, TextBaseline textBaseline, List<Widget> children = const <Widget>[], 

1.4.Column基本使用

var row_column = Column( children: <Widget>[ Text('絕域從軍計(jì)惘然，,'), Text('東南幽恨滿詞箋。'), Text('一簫一劍平生意，'), Text('負(fù)盡狂名十五年。'), ], ); 

Column.png

---

恭喜完成成就：布局菜鳥---獎(jiǎng)勵(lì)卡片：

-	-	-

恭喜解鎖新卡片：Expanded，快去用用吧
Expanded意思是：使…伸展,看到下面的圖,你應(yīng)該就會(huì)明白

var row_test = Row( children: <Widget>[ Expanded( child:Text('絕域從軍計(jì)惘然，'), ), Expanded( child:Text('東南幽恨滿詞箋。'), ), Expanded( child:Text('一簫一劍平生意，'), ), Expanded( child:Text('負(fù)盡狂名十五年。'), ), ], ); 

Expanded.png

---

2.Container--容器

可以理解為Android中的View，更像html中的div
Container是一個(gè)沒(méi)有狀態(tài)的控件

Container.png

---

2.1：源碼小窺

---->[源碼注釋第一句]----------------------------- A convenience widget that combines common painting, positioning, and sizing widgets. 一個(gè)方便的widget，它組合了常見的painting、positioning和sizing 控件。Color color, doublewidth, doubleheight, Widgetthis.child, EdgeInsetsGeometrythis.margin, EdgeInsetsGeometrythis.padding, AlignmentGeometry this.alignment, DecorationDecoration decoration, Decorationthis.foregroundDecoration, BoxConstraintsBoxConstraints constraints, Matrix4 this.transform, 

---

2.2：簡(jiǎn)單使用：

[插曲]這里分享一個(gè)點(diǎn)：當(dāng)看到一個(gè)新的東西應(yīng)該怎么辦?

比如`margin`,看到`EdgeInsetsGeometry`我的心情是一臉懵X,不應(yīng)該是數(shù)字嗎? 進(jìn)源碼：`abstract class EdgeInsetsGeometry {`,抽象的，找他兒子去， AndroidStudio中按`Ctrl+H`可以查看繼承樹，然后就看到了EdgeInsets.fromLTRB 這樣Flutter的margin就和你的知識(shí)庫(kù)中的margin進(jìn)行了連接，你就會(huì)用了class EdgeInsets extends EdgeInsetsGeometry { const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom); const EdgeInsets.all(double value) : left = value, top = value, right = value, bottom = value;新事物往往都與舊事物有聯(lián)系,學(xué)習(xí)新事物最好快速找到它與你知識(shí)庫(kù)中舊事物的聯(lián)系, 聯(lián)系的多少取決于你知識(shí)庫(kù)中內(nèi)容的多少，連接得越多，你會(huì)越快或越能掌握舊事物

var container_test = Container( color: Color.fromARGB(100, 81, 211, 253), height: 100, width: 200, child: Text("張風(fēng)捷特烈"), margin: EdgeInsets.fromLTRB(5, 10, 15, 20), padding:EdgeInsets.all(40), ); 

padding和margin簡(jiǎn)稱pm,左圖是上面代碼沒(méi)有pm時(shí)，右圖是有pm時(shí)

Container測(cè)試.png

---

恭喜達(dá)成成就：Container使用者--卡牌獎(jiǎng)勵(lì)：

-	-	-

NPC:恭喜解鎖兩張輔助卡Padding和Center,快來(lái)測(cè)試一下吧
這兩個(gè)沒(méi)什么好說(shuō)的，顧圖思義，看圖吧

var padding_test = Container( color: Color.fromARGB(100, 81, 211, 253), height: 150, width: 250, child: Padding( padding: EdgeInsets.all(10), child: Text("張風(fēng)捷特烈"), ), ); var center_test = Container( color: Color.fromARGB(100, 81, 211, 253), height: 150, width: 250, child: Center( child: Text("張風(fēng)捷特烈"), ), ); 

Center和Padding.png

---

3.Stack -- 堆疊

第一反應(yīng):棧?有道了一下，有堆疊的意思

---->[源碼注釋第一句]----------------------------- A widget that positions its children relative to the edges of its box. 一個(gè)相對(duì)于它的框的邊緣來(lái)定位它的子部件的Widget。this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow.clip, List<Widget> children = const <Widget>[],

---

觸發(fā)新手任務(wù)3，并觸發(fā)局部Widget樹，系統(tǒng)贈(zèng)送卡牌：

看一下Widget樹.png

-	-	-

請(qǐng)完成下面布局：

新手任務(wù)3.png

var stack_test = Container( color: Color.fromARGB(100, 81, 211, 253), height: 150, width: 250, child: Stack( alignment: Alignment.centerLeft, children: <Widget>[ Text('絕域從軍計(jì)惘然，,'), Align( alignment: Alignment.topRight, widthFactor: 1.5, child: Card( elevation: 10, color: Color(0xffffffff), child: Text('東南幽恨滿詞箋。')), ), Text('一簫一劍平生意，'), Text('負(fù)盡狂名十五年。'), ], )); 

現(xiàn)在對(duì)Stack有點(diǎn)感覺了吧，它像FramLayout一樣會(huì)疊合控件,
并且alignment還可以確定Stack自身相對(duì)于老爸的位置
Align也有alignment,不過(guò)能有一個(gè)孩子，Card我最喜歡了
這里mark一下Card里的ShapeBorder shape,源碼粗略看了一下，可能挺好玩，今天主看控件

---

4.IndexedStack--定索引顯示

按照索引來(lái)顯示堆疊容器中的控件，挺好玩的

看一下Widget樹2.png IndexedStack.png

var index_stack_test = Container( color: Color.fromARGB(100, 81, 211, 253), height: 150, width: 250, child: IndexedStack( index:3, alignment: Alignment.centerLeft, children: <Widget>[ Text('絕域從軍計(jì)惘然，'), Align( alignment: Alignment.topRight, widthFactor: 1.5, child: Card( elevation: 10, color: Color(0xffffffff), child: Text('東南幽恨滿詞箋。')), ), Text('一簫一劍平生意，'), Text('負(fù)盡狂名十五年。'), ], ));

---

5.Transform--變換

transform屬性的Matrix4有機(jī)會(huì)肯定好好分析分析，mark一下
Matrix4.rotationZ傳入的是弧度制的度數(shù)，佩服佩服

Transform( origin: Offset(0, 150), transform: Matrix4.rotationZ(3.1415 / 4), child: //同上面的Container，挺長(zhǎng)的，不貼了 ) 

Transform.png

---

6.Offstage--顯隱控制

把負(fù)盡狂名十五年用Offstage包裹一下，offstage為true--隱藏，為false--顯示
感覺應(yīng)該挺好用，簡(jiǎn)潔，明了，人狠話不多。

Offstage( offstage: false, child: Text('負(fù)盡狂名十五年。'), ), 

恭喜獲得成就：布局小新手 ：獎(jiǎng)勵(lì)卡牌：

-	-	-

---

三、基礎(chǔ)控件點(diǎn)將臺(tái)之--三大戰(zhàn)力

隱藏劇情觸發(fā)：
NPC：傳說(shuō)有三條惡龍盤踞在布局深處，為禍人間，勇士們，準(zhǔn)備好了嗎?

看一下Widget樹3.png

1.表格--Table

1.1：屬性一覽

this.children = const <TableRow>[], this.columnWidths, this.defaultColumnWidth = const FlexColumnWidth(1.0), this.textDirection, this.border, this.defaultVerticalAlignment = TableCellVerticalAlignment.top, this.textBaseline, 

---

1.2：新手任務(wù)4：完成下面表格

表格.png

代碼實(shí)現(xiàn)：
columnWidths:可以指定每列的寬度
border:邊線的樣式
children:通過(guò)TableRow來(lái)顯示一行

var table_test = Table( columnWidths: const <int, TableColumnWidth>{ 0: FixedColumnWidth(60.0), 1: FixedColumnWidth(100.0), 2: FixedColumnWidth(100.0), 3: FixedColumnWidth(80.0), }, defaultVerticalAlignment: TableCellVerticalAlignment.middle, border: TableBorder.all(color: Color(0xff16DAF1), width: 1.0, style: BorderStyle.solid), children: const <TableRow>[ TableRow( children: <Widget>[ Center(child: Text('姓名')), Center(child: Text('年齡')), Center(child: Text('稱號(hào)')), Center(child: Text('武器')), ], ), TableRow( children: <Widget>[ Text('捷特'), Text('24'), Text('風(fēng)神'), Text('黑風(fēng)劍'), ], ), TableRow( children: <Widget>[ Text('巫纓'), Text('23'), Text('百里巫纓'), Text('百里弓'), ], ), TableRow( children: <Widget>[ Text('龍少'), Text('23'), Text('控尊'), Text('控尊戒'), ], ), ], ); 

---

2.流動(dòng)容器 --Flow：

2.1：屬性一覽

屬性很簡(jiǎn)潔,但是：FlowDelegate夠熬一碗粥的

FlowDelegate @required this.delegate, List<Widget> children = const <Widget>[], 

---

2.2：新手任務(wù)5：用完Flow成下面布局

簡(jiǎn)單分析一下：隨機(jī)顏色，隨機(jī)長(zhǎng)度，到尾部不夠就換行

flow.png

代碼實(shí)現(xiàn)：從網(wǎng)上找了一個(gè)FlowDelegate的實(shí)現(xiàn)類
核心就是根據(jù)位置可以自己繪制孩子的位置(吐槽:源碼了竟然沒(méi)有實(shí)現(xiàn)類,給一個(gè)也好啊...)

class MarginFlowDelegate extends FlowDelegate { EdgeInsets _margin = EdgeInsets.zero;//成員變量_margin MarginFlowDelegate(this._margin); //構(gòu)造函數(shù) @override//繪制孩子的方法 void paintChildren(FlowPaintingContext context) { var offsetX = _margin.left; var offsetY = _margin.top; for (int i = 0; i < context.childCount; i++) { var w = context.getChildSize(i).width + offsetX + _margin.right; if (w < context.size.width) { context.paintChild(i, transform: new Matrix4.translationValues(offsetX, offsetY, 0.0)); offsetX = w + _margin.left; } else { offsetX = _margin.left; offsetY += context.getChildSize(i).height + _margin.top + _margin.bottom; context.paintChild(i,transform: new Matrix4.translationValues(offsetX, offsetY, 0.0)); offsetX += context.getChildSize(i).width + _margin.left + _margin.right; } } } 

動(dòng)態(tài)生成Widget數(shù)組(可別傻傻的cv,60個(gè)Container)

formColorList(int count) { var random = new Random(); var li = <Widget>[];for (int i = 0; i < count; i++) { li.add(new Container( width: 100 * (random.nextDouble() + 0.3), height: 30, color: randomRGB(), )); } return li; } 

用起來(lái)倒是簡(jiǎn)單：

var flow_test = Flow( delegate: MarginFlowDelegate(EdgeInsets.all(5)), children: formColorList(60)); 

---

3.包裹--Warp

3.1：簡(jiǎn)單認(rèn)識(shí)：

這東西和css的flex有九分相似，還好我flex布局玩的挺好：有興趣的可看這里
Flow用起來(lái)麻煩很多，但可控制，靈活性更好，如果不是什么逆天改命的布局，Warp應(yīng)該夠了

Wrap({ Key key, this.direction = Axis.horizontal, this.alignment = WrapAlignment.start, this.spacing = 0.0, this.runAlignment = WrapAlignment.start, this.runSpacing = 0.0, this.crossAxisAlignment = WrapCrossAlignment.start, this.textDirection, this.verticalDirection = VerticalDirection.down, List<Widget> children = const <Widget>[], })

direction

方向.png

---

3.2：新手任務(wù)6-1

新手任務(wù)6-1.png

var wrap_test = Wrap( spacing: 8.0, // 列間距 runSpacing: 4.0, //行間距 direction:Axis.vertical , crossAxisAlignment:WrapCrossAlignment.center, children: formColorList(50)); 

---

3.3：新手任務(wù)6-2

新手任務(wù)7.png

var wrap_test = Wrap( spacing: 8.0, // 列間距 runSpacing: 4.0, //行間距 direction:Axis.horizontal , alignment:WrapAlignment.spaceBetween, children: formColorList(50)); 

duang,三大戰(zhàn)力倒下，恭喜獲得稱號(hào)：布局勇士，收獲三張傳說(shuō)級(jí)卡片：

-	-	-

---

三、基礎(chǔ)控件點(diǎn)將臺(tái)之--列表

NPC:好吧，我編不下去了...大家加油!

看一下Widget樹4.png

---

1.老伙伴：ListView

這里先簡(jiǎn)單看一下效果，明天根據(jù)例子來(lái)詳細(xì)分析具體用法
ListView,單獨(dú)可以用，傳入一個(gè)Widget數(shù)組，批量生產(chǎn)ListView.builder簡(jiǎn)潔些

ListView.builder({ Key key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap = false, EdgeInsetsGeometry padding, this.itemExtent, @required IndexedWidgetBuilder itemBuilder, int itemCount, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, bool addSemanticIndexes = true, double cacheExtent, int semanticChildCount, 

---

豎直	水平

//豎直 var list_view_test = ListView.builder( itemCount: 20, padding: EdgeInsets.all(8.0), itemExtent: 60.0, itemBuilder: (BuildContext context, int index) { return Card( child: Center(child: Text('toly $index')), ); }, );//水平 var list_view_test = ListView.builder( itemCount: 20, padding: EdgeInsets.all(8.0), scrollDirection:Axis.horizontal, itemExtent: 60.0, itemBuilder: (BuildContext context, int index) { return Card( child: Center(child: Text('toly $index')), ); }, );

---

2--老伙伴：GridView

GridView.count({ Key key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap = false, EdgeInsetsGeometry padding, @required int crossAxisCount, double mainAxisSpacing = 0.0, double crossAxisSpacing = 0.0, double childAspectRatio = 1.0, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, bool addSemanticIndexes = true, double cacheExtent, List<Widget> children = const <Widget>[], int semanticChildCount, 

---

水平GridView	豎直GridView

//豎直GridView var grid_view_test = GridView.count( crossAxisCount: 4, children: List.generate( 100, (index) { returnCard( child: Center(child: Text('toly $index')), ); }, ), );//水平GridView var grid_view_test = GridView.count( crossAxisCount: 4, scrollDirection:Axis.horizontal, children: List.generate( 100, (index) { returnCard( child: Center(child: Text('toly $index')), ); }, ), );

---

3.軸列容器--ListBody(我自己取的名字)

好吧，被它的名字騙了，和ListView并沒(méi)有太大的關(guān)系，也就是個(gè)多孩子的容器
優(yōu)點(diǎn)在于在指定軸上尺寸正常，另一軸上會(huì)被拉伸，見圖：

A widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent in the other axis. 一個(gè)widget，它按照給定的軸順序排列它的子部件，并迫使它們位于另一個(gè)軸上的父軸的維度。 ListBody({ Key key, this.mainAxis = Axis.vertical, this.reverse = false, List<Widget> children = const <Widget>[], 

---

水平定	豎直定

//豎直定 var list_body_test = Column( children: <Widget>[ ListBody( mainAxis: Axis.vertical, reverse: false, children: formColorList(5) )], );//水平定 var list_body_test = Row( children: <Widget>[ ListBody( mainAxis: Axis.horizontal, reverse: false, children: formColorList(5) )], );

好了，又到三局一度的發(fā)卡時(shí)間了

未精煉的傳說(shuō)級(jí)卡片，更多屬性加成，戰(zhàn)士們，去精煉吧

-	-	-

---

四、容器掃個(gè)尾：

1.Baseline

將文字按照基線對(duì)齊(因?yàn)楸容^好看)--baseline越大，距離頂端越遠(yuǎn)

Baseline.png

const Baseline({ Key key, @required this.baseline, @required this.baselineType, Widget child 

---

formTextList(int count) { var random = new Random(); var li = <Widget>[];for (int i = 0; i < count; i++) { li.add(new Baseline( baselineType: TextBaseline.alphabetic, child: new Text('Toly', style: new TextStyle( fontSize: 20.0 + random.nextInt(40), textBaseline: TextBaseline.alphabetic, ), ), baseline: 80, )); } return li; }var base_line_test = new Row( children: formTextList(5), ); 

---

2.FractionallySizedBox

這個(gè)挺有意思，兒子隨爺爺，父親(FractionallySizedBox)中間倒把手
可以實(shí)現(xiàn)爺爺和孫子之間的尺寸比例聯(lián)系

const FractionallySizedBox({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child, 

---

FractionallySizedBox測(cè)試.png

var fsb_test = new Container( color: Colors.blue, height: 150.0, width: 150.0, child: new FractionallySizedBox( alignment: Alignment.bottomCenter, widthFactor: 1.5, heightFactor: 0.5, child: new Container( color: Colors.red, ), ), ); 

---

3.AspectRatio

就是設(shè)定一個(gè)定比例的容器width/height=aspectRatio

const AspectRatio({ Key key, @required this.aspectRatio, Widget child 

---

AspectRatio測(cè)試.png

var aspectratio_test = new Container( width: 200.0, child: new AspectRatio( aspectRatio: 1.5, child: new Container( color: Colors.red, ), ), ); 

---

恭喜獲得稱號(hào):布局學(xué)徒 ，獎(jiǎng)勵(lì)卡片

-	-	-

還剩幾個(gè)Box，明天寫幾個(gè)布局例子順帶講一下，反正每個(gè)新控件都會(huì)發(fā)張卡
最后把卡片總結(jié)起來(lái)，看看能不能湊夠兩幅撲克牌...打印出來(lái)當(dāng)撲克牌打，還怕Flutter控件學(xué)不會(huì)?
好了，今天就到這里，腦細(xì)胞死不少，趕快看幾集動(dòng)漫補(bǔ)補(bǔ)腦。

---

五、總結(jié)一下mark的點(diǎn)：

//第一天： 3.現(xiàn)在焦點(diǎn)應(yīng)該匯聚在StatefulWidget身上，很多地方都出現(xiàn)了,mark一下 ---StatefulWidget是Widget的一個(gè)子類，是具有狀態(tài)的控件，可謂元老級(jí)別4.canvas竟然沒(méi)辦法畫文字,這不科學(xué)，mark一下 ---保持mark//第三天： 1.這里mark一下Card里的ShapeBorder shape,源碼粗略看了一下，可能挺好玩，今天主看控件 ---保持mark2.transform屬性的Matrix4有機(jī)會(huì)肯定好好分析分析，mark一下 ---保持mark 

---

后記：捷文規(guī)范

1.本文成長(zhǎng)記錄及勘誤表

項(xiàng)目源碼	日期	備注
V0.1-github	2018-12-18	Flutter第3天--基礎(chǔ)控件(上)

2.更多關(guān)于我

筆名	QQ	微信	愛好
張風(fēng)捷特烈	1981462002	zdl1994328	語(yǔ)言
我的github	我的	我的掘金	個(gè)人網(wǎng)站

3.聲明

1----本文由張風(fēng)捷特烈原創(chuàng),轉(zhuǎn)載請(qǐng)注明
2----歡迎廣大編程愛好者共同交流
3----個(gè)人能力有限，如有不正之處歡迎大家批評(píng)指證，必定虛心改正
4----看到這里，我在此感謝你的喜歡與支持

---

icon_wx_200.png
本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.junxiaosheng.cn/17616.html