文本

Flutter中使用Text來實現一般的文本，構建一個Text方法如下：

//構造實例
 Text(......）
 new Text(......）

屬性

[站外圖片上傳中...(image-6886f2-1562061232581)]

TextStyle

TextStyle可以設置文字的屬性，其中比較簡單的包括Color(文本顏色)、fontSize(文字大小)，如果不設置，文本將使用最接近的DefaultTextStyle的樣式。如果給定樣式的TextStyle.inherit屬性為true（默認值），則給定樣式將與最接近的DefaultTextStyle合并。以下是屬性：

這里做了一個簡單的實現

Widget _ZongheText() {
    return Text(
      "一片喧嘩叫嚷之中，忽聽得山下一個雄壯的聲音說道：誰說星宿派武功勝得了丐幫的降龍十八掌？這聲音也不如此響亮，但清清楚楚的傳入了從人耳中，眾人一愕之間，都住了口。hello world hheh aaaayy",
      style: TextStyle(
          inherit: false,
          color: Colors.pinkAccent,
          fontWeight: FontWeight.w600,
          fontSize: 16,
          letterSpacing: 2.0,
          wordSpacing: 5.0,
          //只適用于英文
          fontStyle: FontStyle.italic,
          textBaseline: TextBaseline.alphabetic,
          height: 3,
          decorationStyle: TextDecorationStyle.dashed,
          decoration: TextDecoration.underline,
          fontFamily: "systemmessage"),
    );
  } 

效果如下：

[站外圖片上傳中...(image-1dc262-1562061232581)]

RichText

如果需要對一段文本的不同段落采用不同的文字樣式，可以使用該控件。具體使用方法如下：

//RichText構造實例
new RichText(......)
Text.rich(......)

//測試demo
  Widget _RichTestWidget(BuildContext context) {
    return Container(
        margin: EdgeInsets.fromLTRB(0, 10, 5, 0),
        padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
        child: Text.rich(TextSpan(
            text: "flutter中RichText用于處理一段文字可能有不同的風格，如：",
            children: <TextSpan>[
              TextSpan(text: "紅色，", style: TextStyle(color: Colors.red)),
              TextSpan(text: "黃色，", style: TextStyle(color: Colors.yellow)),
              TextSpan(text: "藍色，", style: TextStyle(color: Colors.blue)),
              TextSpan(
                  text: "點我試試",
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      var snackBar = SnackBar(
                        content: Text("hello world"),
                        duration: Duration(seconds: 3), // 持續時間
                      );
                      _scaffoldkey.currentState.showSnackBar(snackBar);
                    }),
            ],
            style: TextStyle(color: Color(0xff000000)))));
  }

效果如下：

[站外圖片上傳中...(image-9b1769-1562061232581)]

PS

1. Text沒有寬度、高度以及padding設置，如果需要設置這些屬性，則需要在外面包裹一層Container，設置Container的這些屬性
2. 不同于Android的TextView，Text沒有點擊觸發監聽，如果需要可點擊，則需要設置手勢(感覺比較麻煩，不推薦)或者使用FlatButton(相當于一個可點擊的Text)
3. color和foreground只能存在一個，否則報錯
4. RichText中如果內部的TextSpan設置了TextStyle，則外部的TextStyle無效。

按鈕

在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。
一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

一般按鈕（MaterialButton、RaisedButton、OutlineButton、FlatButton）

RaisedButton、OutlineButton、FlatButton都是一般的按鈕，這三個按鈕均是繼承于MaterialButton，它們的區別在于：

1. RaisedButton：一般的按鈕，類似android的button，有凸起
2. FlatButton：扁平式按鈕，相當于有點擊事件的text
3. OutlineButton：帶邊框的背景透明的按鈕

構造方法如下：

//構造MaterialButton，參數里面如果沒有onPressed，會報警告，不影響編譯，默認為button被禁用，
//這里onPressed回調里面，()表示回調參數，這里沒有表示未傳參，{}里面編寫回調后的操作代碼
MaterialButton( onPressed: () {}） 

由于這三個button均是繼承于MaterialButton，MaterialButton具有的屬性這三個button也都具有，只是MaterialButton的部分屬性它們不具有，這里MaterialButton的具體屬性如下，常用屬性加粗顯示：

左邊FlatButton，右邊MaterialButton
[站外圖片上傳中...(image-49792b-1562061232581)]

    return Row(children: <Widget>[
      Container(
          height: 24,
          child: FlatButton(
            padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
            child: Text(
              this.text,
              style: TextStyle(color: _color(), fontSize: 12),
            ),
            onPressed: () {
              setState(() {
                if (this.choose) {
                  this.choose = false;
                } else {
                  this.choose = true;
                }
              });
            },
            shape: _shapeBorder(),
          )),
      MaterialButton(
        padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
        minWidth: 0,
        height: 24,
        child: Text(
          this.text,
          style: TextStyle(color: _color(), fontSize: 12),
        ),
        onPressed: () {
          setState(() {
            if (this.choose) {
              this.choose = false;
            } else {
              this.choose = true;
            }
          });
        },
        shape: _shapeBorder(),
      ),
    ]); 

shape

這個屬性需要多注意下，用來設定button的邊框形狀。常用的有以下幾個：

1. BeveledRectangleBorder 帶斜角的長方形邊框
2. CircleBorder 圓形邊框
3. RoundedRectangleBorder 圓角矩形
4. StadiumBorder 兩端是半圓的邊框

圖標按鈕（IconButton）

這個比較簡單，一個可交互的圖形圖標。屬性頁沒啥難以理解的，邊框是個透明圓形，類似Android的ImageButton。直接上代碼：

   Widget _IconButton() {
    return IconButton(
      onPressed: () {},
      icon: Image.asset("assets/images/food01.jpeg"),
//      icon: Icon(Icons.forward),
      iconSize: 24,

    );
  }

懸浮按鈕（FloatingActionButton）

FloatingActionButton，在Material Design中，一般用來處理界面中最常用，最基礎的用戶動作。它一般出現在屏幕內容的前面，通常是一個圓形，中間有一個圖標。 FAB有三種類型：regular, mini, and extended。不要強行使用FAB，只有當使用場景符合FAB功能的時候使用才最為恰當。需要注意的屬性如下：

floatingActionButtonLocation

這是Scaffold Widget的一個屬性，和FloatingActionButton配合使用。可以設置FloatingActionButton的位置。具體效果如下圖：
[站外圖片上傳中...(image-38ec77-1562061232581)]
使用FloatActionButtonLocation中的centerDocked屬性和BottomNavigationBar配合可以實現下面的設計，這個設計在喵嘰和王者榮耀里面出現過，具體效果如下：

[站外圖片上傳中...(image-7c7736-1562061232581)]

class TestPage extends StatefulWidget {
  @override
  _TestSate createState() {
    // TODO: implement createState
    return _TestSate();
  }
}

class _TestSate extends State<TestPage> {
  int _tabIndex = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: new Text("ZXZ-IMAGE")),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(backgroundColor: Colors.lightBlueAccent,child : Text("+",style: TextStyle(fontSize: 24),),onPressed: (){}),
      body: _PageList()[_tabIndex],
      bottomNavigationBar:  BottomNavigationBar(
          items: _list(),
          currentIndex: _tabIndex,
          onTap: (index) {
            setState(() {
              _tabIndex = index;
            });
          }),
    );
  }

  List<BottomNavigationBarItem> _list() {
    List<BottomNavigationBarItem> list = [];
    list.add(BottomNavigationBarItem(
        icon: Image.asset("assets/images/house.png"),
        title: Text("Construct")));
    list.add(BottomNavigationBarItem(
        icon: Image.asset("assets/images/plane.png"),
        title: Text("Attribute")));
    return list;
  }

  List<Widget> _PageList() {
    List<Widget> result = [];
    result.add(ImageConstructPage());
    result.add(ImageAttributePage());
    return result;
  }
} 

下拉按鈕（DropdownButton）

Material Style下拉菜單按鈕，使用方法如下：

class _DropdownState extends State<_DropdownWidget>{

  CityItem _item;
  List<DropdownMenuItem<CityItem>> _list;

  @override
  void initState() {
    _list = [];
    _list.add(new DropdownMenuItem<CityItem>(child: Text("上海"),value: CityItem("上海", 0)));
   _list.add(DropdownMenuItem<CityItem>(child: Text("北京",style: TextStyle(color: Colors.red),),value: CityItem("北京", 1)));
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DropdownButton(onChanged: (value) {
      setState(() {
        _item = value;
      });
    },items: _list,
    value: _item,
    hint: Text("請選擇城市"),);
  }
 

由于我們在點擊每一個條目后，展示的選中條目會變化，所以DropdownButton應當繼承StatefulWidget，在選中條目后也就是onChange的回調中使用setState((){})更新對象的狀態。另外，這里的列表數據必須是List<DropdownMenuItem<T>>。DropdownMenuItem<T>里面包含一個child和value，綁定了view和data，這里每個item都可以設置一個child，意味著下拉菜單的每個item可以有不同的view。這里需要注意的是下面兩個屬性，其他的屬性比較簡單或者已經再其他button說明過，就不再說明。

上面代碼的結果如下：

[站外圖片上傳中...(image-75c22c-1562061232581)]

ButtonBar

可以水平擺放一堆button的控件，但我試了下，也可以擺text，不可滑動，超過屏幕寬度報錯，感覺這更像一個水平布局，不明白為啥官方歸納到基礎組件里面。使用簡單，在此不舉例了。

PS

1. RaisedButton、FlatButton以及OutlineButton的minWidth=88dp，minHeight=36dp，且無法設置，只有通過Container包裹設置其寬度，如果需要設置其寬度自適應，可以使用MaterialButton，設置minWidth = 0。
2. 如果要設置button的高度，可以使用Container包裹button，或者使用MaterialButton(這玩意兒有屬性height)。
3. 如果設置MaterialButton的onPressed為null，則此時button為空白。
4. DropdownButton下拉菜單選中的值（注意：在初始化時，要么為null，這時顯示默認hint的值；如果自己設定值，則值必須為列表中的一個值，如果不在列表中，會拋出異常）
5. IconButton需要被包裹在Scaffold widget中，否則會報錯 textfield widgets require a material widget ancestor
6. 如果需要去掉點擊效果且不禁用該控件，可以把splashColor和hightlightColor同時設置為transparent
7. OutlineButton是一個有默認邊線且背景透明的按鈕，也就是說我們設置其邊線和顏色是無效的，其他屬性跟MaterialButton中屬性基本一致

圖片

Image, 圖片顯示Widget, 和Android ImageView相似，但是從實際使用的方法上看，與常用的圖片加載庫，如Picasso，Glide等相似，支持本地圖片，資源圖片，網絡圖片等加載方式。

1. Image：通過ImageProvider來加載圖片
2. Image.asset：用來加載本地資源圖片
3. Image.file：用來加載本地（File文件）圖片
4. Image.network：用來加載網絡圖片
5. Image.memory：用來加載Uint8List資源（byte數組）圖片

屬性

fit

看圖紙觀點：

[站外圖片上傳中...(image-f400a9-1562061232581)]

在平時的開發中，基本上都是用上面兩個，其他基本上用不到。

圓角圖片

1. 使用ClipOval，這里注意如果原圖不是正方形，使用這個會成一個橢圓。

  Widget _AssetImageRec() {
    return Image.asset(
      "assets/images/food01.jpeg",
      width: 200,
      height: 200,
      fit: BoxFit.fill,
    );
  }
  
  Widget _CircleAvatar() {
    return new ClipOval(child: _AssetImageRec());
  } 

2. 可以用Container包裹一個Image，然后設置Container的decoration
3. 使用_ClipRRect，通過設置BorderRadius來實現。

  Widget _ClipRRect() {
    return ClipRRect(
      child: _AssetImage(),
      borderRadius: BorderRadius.all(Radius.circular(60)),
    );
  } 

網絡緩存圖片（占位圖片）

1. 使用FadeInImage.assetNetwork（flutter自帶）

Widget _FadeInImage() {
    return FadeInImage.assetNetwork(
      placeholder: "assets/images/food01.jpeg",//占位圖
      image://網絡圖片
          "https://rpic.douyucdn.cn/live-cover/roomCover/cover_update/2019/05/29/43cf32dcde0b77c765681c6f0a9af6fb.jpg",
      width: 200,
      height: 200,
      fit: BoxFit.fill,
      fadeInDuration: Duration(milliseconds: 400),
      fadeOutDuration: Duration(milliseconds: 400),
    );
  } 

2. 使用第三方庫：（cached_network_image：https://pub.dartlang.org/packages/cached_network_image）

列表item實現

下圖是斗魚極速版中首頁的item，基本上可以通過text和image來實現，這里會用到Stack來實現控件的覆蓋，Column實現豎直線性布局，Row實現水平線性布局，這里不多做介紹，具體代碼貼上：

[站外圖片上傳中...(image-5658f9-1562061232581)]

Widget _RoomItem(RoomItem item, double screenWidth) {
    return FlatButton(
      child: Column(children: <Widget>[
        _ImageItem(item, screenWidth),
        Container(
          child: Text(item.roomName,
              textAlign: TextAlign.left,
              softWrap: false,
              overflow: TextOverflow.ellipsis),
          margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
        )
      ], crossAxisAlignment: CrossAxisAlignment.start),
      padding: EdgeInsets.zero,
      onPressed: () {},
    );
  }

  Widget _ImageItem(RoomItem item, double screenWidth) {
    double itemWidth = (screenWidth - 5) / 2;
    return Stack(children: <Widget>[
      Image.network(
        item.coverUrl,
        width: itemWidth,
        height: itemWidth * 3 / 5,
        fit: BoxFit.fill,
      ),
      Container(
        width: itemWidth,
        height: itemWidth * 3 / 5,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _CornerWidget(),
            Expanded(
              child: Container(),
            ),
            Container(
                height: 29,
                width: itemWidth,
                alignment: AlignmentDirectional.bottomStart,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.transparent, Color(0x7b000000)],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter)),
                child: Row(children: <Widget>[
                  Container(
                      padding: EdgeInsets.fromLTRB(4, 0, 0, 6),
                      width: 100,
                      child: Text(item.authorName,
                          style: TextStyle(color: Colors.white, fontSize: 11),
                          softWrap: false,
                          overflow: TextOverflow.ellipsis)),
                  Expanded(
                    child: Container(
                        padding: EdgeInsets.fromLTRB(0, 0, 6, 6),
                        child: Row(
                            textDirection: TextDirection.rtl,
                            children: <Widget>[
                              Text(item.hot,
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 11),
                                  textAlign: TextAlign.right),
                              Container(
                                child: Image.asset(
                                    "assets/images/icon_room_hot.webp",
                                    fit: BoxFit.contain,
                                    width: 9,
                                    height: 9),
                                margin: EdgeInsets.fromLTRB(0, 0, 4, 0),
                              )
                            ])),
                  )
                ]))
          ],
        ),
      ),
    ]);
  } 

單選框、復選框

Material widgets庫中提供了Material風格的單選開關Switch和復選框Checkbox，它們都是繼承自StatelessWidget，所以它們本身不會保存當前選擇狀態，所以一般都是在父widget中管理選中狀態。當用戶點擊Switch或Checkbox時，它們會觸發onChanged回調，我們可以在此回調中處理選中狀態改變邏輯。

公共屬性

Switch(ios的那種滑動的單項選擇器)

Checkbox(類似于android的checkbox)

Radio(類似于android的RadioButton)

直接代碼：

 class TestPage extends StatefulWidget {
  @override
  _TestState createState() {
    // TODO: implement createState
    return _TestState();
  }
}

class _TestState extends State<TestPage> {
  bool _isSwitchChoosed = false;
  bool _isCheckboxChoosed = false;
  String _radioChoosed = null;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ZXZ-CHOOSE"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[_SwitchWidget(), _CheckBox(), _Radio()],
      ),
    );
  }

  Widget _SwitchWidget() {
    return Switch(
        onChanged: (bool value) {
          setState(() {
            _isSwitchChoosed = value;
          });
        },
        value: _isSwitchChoosed,
        activeColor: Color(0xFFFF6633),
        inactiveThumbColor: Colors.white);
  }

  Widget _CheckBox() {
    return Checkbox(
      onChanged: (bool value) {
        setState(() {
          _isCheckboxChoosed = value;
        });
      },
      value: _isCheckboxChoosed,
      activeColor: Color(0xFFFF6633),
      tristate: true,
    );
  }

  Widget _Radio() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Radio<String>(
            value: "北京",
            groupValue: _radioChoosed,
            onChanged: (String s) {
              setState(() {
                this._radioChoosed = s;
              });
            },
        activeColor: Color(0xFFFF6633),),
        Radio<String>(
            value: "上海",
            groupValue: _radioChoosed,
            onChanged: (String s) {
              setState(() {
                this._radioChoosed = s;
              });
            }),
        Expanded(child: RadioListTile<String>(
            value: "廣州",
            title: new Text("廣州"),
            groupValue: _radioChoosed,
            onChanged: (String s) {
              setState(() {
                this._radioChoosed = s;
              });
            }),)
        ,
        Radio<String>(
            value: "深圳",
            groupValue: _radioChoosed,
            onChanged: (String s) {
              setState(() {
                this._radioChoosed = s;
              });
            })
      ],
    );
  }
}

效果如下：

[站外圖片上傳中...(image-e0ca8e-1562061232581)]

PS

1. 還有個CheckboxListTile和RadioListTile，可以關注下。

進度條

LinearProgressIndicator & CircularProgressIndicator

Flutter使用LinearProgressIndicator表示條形進度條，CircularProgressIndicator表示圓形進度條，由于兩個控件的屬性基本相同，下面是幾個比較重要的屬性：

slider(滑塊)

滑塊組件，可用于數量的選擇，一般可用于調節變量，像音量啥的，以下是它的屬性：

直接代碼：

  Widget _getCircularProgressIndicator() {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
      child: CircularProgressIndicator(
        value: null,
        backgroundColor: Colors.grey,
        strokeWidth: 2,
      ),
    );
  } 
class _SliderTest extends StatefulWidget {
  @override
  _SliderState createState() {
    return _SliderState();
  }
}

class _SliderState extends State<_SliderTest> {
  double _value = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Slider(
          value: _value,
          onChanged: (double val) {
            setState(() {
              this._value = val;
            });
          },
      divisions: 5,
      label: "1",),
    );
  }
}

這里截圖如下：

[站外圖片上傳中...(image-94d658-1562061232581)]

PS

1. LinearProgressIndicator、CircularProgressIndicator、slider都具有狀態的變化，一般都應放在StatefulWidget中
2. LinearProgressIndicator、CircularProgressIndicator的value如果設置為null，會形成一個永不停止的動畫，很有loading動畫的風格，簡單的loading可以用這個一試。

輸入框

Flutter中的文本輸入框（TextField）就類似于Android中的EditText，但是用起來比EditText方便很多，改變樣式也更加的方便。

屬性

下面看下TextField中特有的屬性（之前其他控件已列過的屬性不再列）

TextEditingController

TextEditingController作為TextField的controller屬性。 在用戶輸入時，controller的text和selection屬性不斷的更新。要在這些屬性更改時得到通知，請使用controller的addListener方法監聽控制器 。 （如果你添加了一個監聽器，需要在State對象的dispose方法中刪除監聽器）。該TextEditingController還可以讓您控制TextField的內容。最常見的是TextEditingController.text用來獲取當前輸入框的內容，TextEditingController.clear清空輸入框的內容。

InputDecoration

InputDecoration主要用于控制TextField的外觀以及提示信息等。主要可以設置前綴樣式、后綴樣式等，屬性很多，這里借用下網上的勞動成果，具體如下：

[站外圖片上傳中...(image-234926-1562061232581)]

斗魚頂部搜索框

斗魚頂部的搜索框前部和后面均有一個圖標，這里一開始想用InputDecoration.prefix和InputDecoration.suffix來實現，但是和輸入框沒法對齊，因此這里就沒用這倆屬性。

class _TextField extends State<_TextFieldWidget> {
  bool _hasInput = false;
  TextEditingController controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    // TODO: implement build
    return Container(
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.fromLTRB(16, statusBarHeight, 0, 0),
        child: Row(children: <Widget>[
          Expanded(child: _search()),
          _cancelBtn(context)
        ]));
  }

  Widget _search() {
    return Container(
        color: Color(0xffF0F2F5),
        child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
          Container(
              padding: EdgeInsets.all(10),
              child: Image.asset(
                "assets/images/icon_home_search.webp",
                width: 24,
                height: 24,
              )),
          Expanded(
            child: TextField(
              controller: controller,
              cursorColor: Color(0xffff7700),
              cursorWidth: 1.5,
              onChanged: (text) {
                //內容改變的回調
                setState(() {
                  if (text.length > 0) {
                    _hasInput = true;
                  } else {
                    _hasInput = false;
                  }
                });
              },
              decoration: InputDecoration(
                counter: null,
                  contentPadding: EdgeInsets.fromLTRB(0, 10, 0, 10),
                  fillColor: Color(0xffF0F2F5),
                  filled: true,
                  hintText: "搜索房間/主播/分類",
                  hintStyle: TextStyle(fontSize: 14, color: Color(0xffbbbbbb)),
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffF0F2F5)),
                      borderRadius: BorderRadius.all(Radius.circular(2))),
                  focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffF0F2F5)),
                      borderRadius: BorderRadius.all(Radius.circular(2))),
                  enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffF0F2F5)),
                      borderRadius: BorderRadius.all(Radius.circular(2)))),
              style: TextStyle(
                fontSize: 14,
                color: Color(0xff333333),
              ),
            ),
          ),
          Container(
              padding: EdgeInsets.fromLTRB(0, 0, 12, 0),
              child: IconButton(
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  icon: Image.asset(
                    _hasInput ? "assets/images/icon_search_clear.webp" : "",
                    width: 16,
                    height: 16,
                  ),
                  onPressed: () {
                    setState(() {
                      controller.clear();
                    });
                  })),
        ]));
  }

  Widget _cancelBtn(BuildContext context) {
    return MaterialButton(
        minWidth: 0,
        padding: EdgeInsets.all(0),
        onPressed: () {
          showDialog(
              context: context,
              builder: (_) => new LoginDialog(),
              barrierDismissible: false);
        },
        child: Text("取消",
            style: TextStyle(
                color: Color(0x54000000),
                fontSize: 14,
                fontWeight: FontWeight.bold)),
        elevation: null);
  }
} 

[站外圖片上傳中...(image-ca4c74-1562061232581)]

PS

1. Row無法包裹TextField，需要在TextField外再包裹一層Expanded方可
2. TextField需要被包裹在Scaffold widget中，否則會報錯 textfield widgets require a material widget ancestor，后來發現用Material包裹也行
3. TextField的prefixIcon和prefix不好用，prefixIcon限制了類型，prefix的對齊效果賊差，建議還是用Row包裹Image+TextField實現圖標后面緊跟輸入框的視圖。
4. TextField的最大限制輸入maxLength設置之后導致右下角會冒出個計數器角標，而且消不掉，這就尷尬了，感覺只能在onChanged里面處理了。

對話框

SimpleDialog & AlertDialog & AboutDialog

1. SimpleDialog，一般可以利用多個SimpleDialogOption為用戶提供了幾個選項。
2. AlertDialog，警告對話框。警告對話框有一個可選標題title和一個可選列表的actions選項。
3. AboutDialog，關于對話框。提供一個app信息的對話框

展示 & 隱藏

1. 對話框本質上是屬于一個路由的頁面route，由Navigator進行管理，所以控制對話框的顯示和隱藏，也是調用Navigator.of(context)的push和pop方法。
2. 在Flutter中，提供了showDialog()、showGeneralDialog()、showCupertinoDialog()，其中調用showDialog()方法展示的是material風格的對話框，調用showCupertinoDialog()方法展示的是ios風格的對話框。而這兩個方法其實都會去調用showGeneralDialog()方法，可以從源碼中看到最后是利用Navigator.of(context, rootNavigator: true).push()一個頁面。這里我在android上使用showCupertinoDialog()，出現的漸變動畫會有一點卡頓，另外還有一個showAboutDialog()，打開的是一個關于的對話框。

 //打開關于對話框
 showAboutDialog(
        context: context,
        applicationIcon:
        Image.asset("assets/images/house.png"),
        applicationName: "flutter-douyu",
       applicationVersion: "1.0.0"); }) 
//打開一個對話框
void _showDialog(BuildContext context){
     showDialog(context: context, builder: (_) =>
        AlertDialog(title: Text("測試"), content: Text("測試測試測試測試測試"),
          actions: <Widget>[
            FlatButton(onPressed: () {
              Navigator.of(context).pop();//關閉對話框
            }, child: Text("確定")),
            FlatButton(onPressed: () {
              Navigator.of(context).pop();
            }, child: Text("取消")),
          ],));
  }

自定義對話框

自定義Dialog可以有兩種方式：

1. 在Dialog提供了child參數供寫視圖界面
2. 繼承Dialog類，就需要重寫build函數。

斗魚的登錄界面就是個自定義對話框，具體視圖如下圖所示：

[站外圖片上傳中...(image-bcd28a-1562061232581)]
代碼太長，不一一貼，主要代碼如下：

//第一種方式
 void _showDialog1(BuildContext context) {
    showDialog(
        context: context,
        builder: (_) => Dialog(
            backgroundColor: Colors.transparent,
            child: Container(
              width: 311,
              height: 500,
              child: Center(
                  child: Stack(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.fromLTRB(0, 80, 0, 0),
                    padding: EdgeInsets.all(0),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(2)),
                        color: Colors.white),
                    width: 311,
                    height: 420,
                    child: _CloseImg(context),
                  ),
                  _LogoImg(),
                  _MainWidget()
                ],
              )),
            )));
  }
  //第二種方式
class LoginDialog extends Dialog {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
            child: Stack(
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(0, 80, 0, 0),
              padding: EdgeInsets.all(0),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(2)),
                  color: Colors.white),
              width: 311,
              height: 420,
              child:  _CloseImg(context),//
            ),//底部那個大白框
            _LogoImg(),//上面那個鯊魚娘
            _MainWidget()//最主要的操作面板
          ],
        )));
  }
}

PS

1. 按照我們公司的UI以往的設計方案（坑爹尿性）來看，基本上用Flutter自帶的Dialog樣式固定，基本上沒啥用了，還是自定義吧~~
2. 繼承Dialog類，重寫build函數時會發現里面所有的Text控件會默認有個雙下劃波浪線，不知道為啥這么設置。。。

總結

1. 不同于android的控件，Flutter的控件很少能夠自己設置寬高，基本上都需要被包裹在Container里面才行。
2. 使用本地文件，除了導入文件之外，還需要在項目根目錄下的pubspec.yaml文件中的assets:目錄下添加該文件
3. 實際寫布局的時候會發現層級很深，導致代碼里的child一個接一個，建議最好不要超過三層，如果超過寫在新的方法體內，否則極難閱讀。
4. 控件里的屬性并不是不設置就沒有，例如button里面的splashColor不設置會使用默認的，如果想不使用該屬性，需要自己設置。
5. 部分控件屬性極多，不需要完全搞明白，弄明白重要的就行