文本

Flutter中使用Text來實(shí)現(xiàn)一般的文本灼捂，構(gòu)建一個(gè)Text方法如下：

//構(gòu)造實(shí)例
 Text(......）
 new Text(......）

屬性

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

TextStyle

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

這里做了一個(gè)簡單的實(shí)現(xiàn)

Widget _ZongheText() {
    return Text(
      "一片喧嘩叫嚷之中，忽聽得山下一個(gè)雄壯的聲音說道：誰說星宿派武功勝得了丐幫的降龍十八掌帮碰？這聲音也不如此響亮相味，但清清楚楚的傳入了從人耳中，眾人一愕之間殉挽，都住了口丰涉。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構(gòu)造實(shí)例
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用于處理一段文字可能有不同的風(fēng)格一死，如：",
            children: <TextSpan>[
              TextSpan(text: "紅色，", style: TextStyle(color: Colors.red)),
              TextSpan(text: "黃色傻唾，", style: TextStyle(color: Colors.yellow)),
              TextSpan(text: "藍(lán)色投慈，", style: TextStyle(color: Colors.blue)),
              TextSpan(
                  text: "點(diǎn)我試試",
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      var snackBar = SnackBar(
                        content: Text("hello world"),
                        duration: Duration(seconds: 3), // 持續(xù)時(shí)間
                      );
                      _scaffoldkey.currentState.showSnackBar(snackBar);
                    }),
            ],
            style: TextStyle(color: Color(0xff000000)))));
  }

效果如下：

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

PS

1. Text沒有寬度、高度以及padding設(shè)置冠骄，如果需要設(shè)置這些屬性伪煤，則需要在外面包裹一層Container，設(shè)置Container的這些屬性
2. 不同于Android的TextView凛辣，Text沒有點(diǎn)擊觸發(fā)監(jiān)聽抱既，如果需要可點(diǎn)擊，則需要設(shè)置手勢(感覺比較麻煩扁誓，不推薦)或者使用FlatButton(相當(dāng)于一個(gè)可點(diǎn)擊的Text)
3. color和foreground只能存在一個(gè)防泵，否則報(bào)錯(cuò)
4. RichText中如果內(nèi)部的TextSpan設(shè)置了TextStyle蚀之，則外部的TextStyle無效。

按鈕

在 Flutter 里有很多的 Button捷泞，包括了：MaterialButton足删、RaisedButton、FloatingActionButton肚邢、FlatButton壹堰、IconButton、ButtonBar骡湖、DropdownButton 等贱纠。
一般常用的 Button 是 MaterialButton、IconButton响蕴、FloatingActionButton谆焊。

一般按鈕（MaterialButton、RaisedButton浦夷、OutlineButton辖试、FlatButton）

RaisedButton、OutlineButton劈狐、FlatButton都是一般的按鈕罐孝，這三個(gè)按鈕均是繼承于MaterialButton，它們的區(qū)別在于：

1. RaisedButton：一般的按鈕肥缔，類似android的button莲兢，有凸起
2. FlatButton：扁平式按鈕，相當(dāng)于有點(diǎn)擊事件的text
3. OutlineButton：帶邊框的背景透明的按鈕

構(gòu)造方法如下：

//構(gòu)造MaterialButton续膳，參數(shù)里面如果沒有onPressed改艇，會(huì)報(bào)警告，不影響編譯坟岔，默認(rèn)為button被禁用谒兄，
//這里onPressed回調(diào)里面，()表示回調(diào)參數(shù)社付，這里沒有表示未傳參承疲，{}里面編寫回調(diào)后的操作代碼
MaterialButton( onPressed: () {}） 

由于這三個(gè)button均是繼承于MaterialButton，MaterialButton具有的屬性這三個(gè)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

這個(gè)屬性需要多注意下，用來設(shè)定button的邊框形狀悲伶。常用的有以下幾個(gè)：

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

圖標(biāo)按鈕（IconButton）

這個(gè)比較簡單艾恼，一個(gè)可交互的圖形圖標(biāo)。屬性頁沒啥難以理解的麸锉，邊框是個(gè)透明圓形钠绍，類似Android的ImageButton。直接上代碼：

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

    );
  }

懸浮按鈕（FloatingActionButton）

FloatingActionButton花沉，在Material Design中柳爽，一般用來處理界面中最常用，最基礎(chǔ)的用戶動(dòng)作碱屁。它一般出現(xiàn)在屏幕內(nèi)容的前面磷脯，通常是一個(gè)圓形，中間有一個(gè)圖標(biāo)娩脾。 FAB有三種類型：regular, mini, and extended赵誓。不要強(qiáng)行使用FAB，只有當(dāng)使用場景符合FAB功能的時(shí)候使用才最為恰當(dāng)柿赊。需要注意的屬性如下：

floatingActionButtonLocation

這是Scaffold Widget的一個(gè)屬性洽腺，和FloatingActionButton配合使用「埠担可以設(shè)置FloatingActionButton的位置蘸朋。具體效果如下圖：
[站外圖片上傳中...(image-38ec77-1562061232581)]
使用FloatActionButtonLocation中的centerDocked屬性和BottomNavigationBar配合可以實(shí)現(xiàn)下面的設(shè)計(jì)，這個(gè)設(shè)計(jì)在喵嘰和王者榮耀里面出現(xiàn)過扣唱，具體效果如下：

[站外圖片上傳中...(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("請選擇城市"),);
  }
 

由于我們在點(diǎn)擊每一個(gè)條目后，展示的選中條目會(huì)變化噪沙，所以DropdownButton應(yīng)當(dāng)繼承StatefulWidget炼彪，在選中條目后也就是onChange的回調(diào)中使用setState((){})更新對象的狀態(tài)。另外正歼，這里的列表數(shù)據(jù)必須是List<DropdownMenuItem<T>>辐马。DropdownMenuItem<T>里面包含一個(gè)child和value，綁定了view和data局义，這里每個(gè)item都可以設(shè)置一個(gè)child喜爷，意味著下拉菜單的每個(gè)item可以有不同的view冗疮。這里需要注意的是下面兩個(gè)屬性，其他的屬性比較簡單或者已經(jīng)再其他button說明過檩帐，就不再說明术幔。

上面代碼的結(jié)果如下：

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

ButtonBar

可以水平擺放一堆button的控件，但我試了下湃密，也可以擺text诅挑，不可滑動(dòng)，超過屏幕寬度報(bào)錯(cuò)泛源，感覺這更像一個(gè)水平布局拔妥，不明白為啥官方歸納到基礎(chǔ)組件里面。使用簡單俩由，在此不舉例了毒嫡。

PS

1. RaisedButton、FlatButton以及OutlineButton的minWidth=88dp幻梯，minHeight=36dp兜畸，且無法設(shè)置，只有通過Container包裹設(shè)置其寬度碘梢，如果需要設(shè)置其寬度自適應(yīng)咬摇，可以使用MaterialButton，設(shè)置minWidth = 0煞躬。
2. 如果要設(shè)置button的高度肛鹏，可以使用Container包裹button，或者使用MaterialButton(這玩意兒有屬性height)恩沛。
3. 如果設(shè)置MaterialButton的onPressed為null在扰，則此時(shí)button為空白。
4. DropdownButton下拉菜單選中的值（注意：在初始化時(shí)雷客，要么為null芒珠，這時(shí)顯示默認(rèn)hint的值；如果自己設(shè)定值搅裙，則值必須為列表中的一個(gè)值皱卓，如果不在列表中，會(huì)拋出異常）
5. IconButton需要被包裹在Scaffold widget中部逮，否則會(huì)報(bào)錯(cuò) textfield widgets require a material widget ancestor
6. 如果需要去掉點(diǎn)擊效果且不禁用該控件娜汁，可以把splashColor和hightlightColor同時(shí)設(shè)置為transparent
7. OutlineButton是一個(gè)有默認(rèn)邊線且背景透明的按鈕，也就是說我們設(shè)置其邊線和顏色是無效的兄朋，其他屬性跟MaterialButton中屬性基本一致

圖片

Image, 圖片顯示W(wǎng)idget, 和Android ImageView相似诀黍，但是從實(shí)際使用的方法上看放棒，與常用的圖片加載庫等脂，如Picasso壕吹，Glide等相似，支持本地圖片，資源圖片，網(wǎng)絡(luò)圖片等加載方式。

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

屬性

fit

看圖紙觀點(diǎn)：

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

在平時(shí)的開發(fā)中熟嫩，基本上都是用上面兩個(gè)，其他基本上用不到褐捻。

圓角圖片

1. 使用ClipOval掸茅，這里注意如果原圖不是正方形，使用這個(gè)會(huì)成一個(gè)橢圓柠逞。

  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包裹一個(gè)Image昧狮，然后設(shè)置Container的decoration
3. 使用_ClipRRect，通過設(shè)置BorderRadius來實(shí)現(xiàn)板壮。

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

網(wǎng)絡(luò)緩存圖片（占位圖片）

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

Widget _FadeInImage() {
    return FadeInImage.assetNetwork(
      placeholder: "assets/images/food01.jpeg",//占位圖
      image://網(wǎng)絡(luò)圖片
          "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實(shí)現(xiàn)

下圖是斗魚極速版中首頁的item逗鸣，基本上可以通過text和image來實(shí)現(xiàn)，這里會(huì)用到Stack來實(shí)現(xiàn)控件的覆蓋个束，Column實(shí)現(xiàn)豎直線性布局慕购，Row實(shí)現(xiàn)水平線性布局聊疲，這里不多做介紹茬底，具體代碼貼上：

[站外圖片上傳中...(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),
                              )
                            ])),
                  )
                ]))
          ],
        ),
      ),
    ]);
  } 

單選框、復(fù)選框

Material widgets庫中提供了Material風(fēng)格的單選開關(guān)Switch和復(fù)選框Checkbox获洲，它們都是繼承自StatelessWidget阱表，所以它們本身不會(huì)保存當(dāng)前選擇狀態(tài)，所以一般都是在父widget中管理選中狀態(tài)。當(dāng)用戶點(diǎn)擊Switch或Checkbox時(shí)最爬，它們會(huì)觸發(fā)onChanged回調(diào)涉馁，我們可以在此回調(diào)中處理選中狀態(tài)改變邏輯。

公共屬性

Switch(ios的那種滑動(dòng)的單項(xiàng)選擇器)

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. 還有個(gè)CheckboxListTile和RadioListTile帮坚，可以關(guān)注下。

進(jìn)度條

LinearProgressIndicator & CircularProgressIndicator

Flutter使用LinearProgressIndicator表示條形進(jìn)度條互艾，CircularProgressIndicator表示圓形進(jìn)度條试和，由于兩個(gè)控件的屬性基本相同，下面是幾個(gè)比較重要的屬性：

slider(滑塊)

滑塊組件但指，可用于數(shù)量的選擇寡痰，一般可用于調(diào)節(jié)變量，像音量啥的棋凳，以下是它的屬性：

直接代碼：

  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都具有狀態(tài)的變化，一般都應(yīng)放在StatefulWidget中
2. LinearProgressIndicator蠢箩、CircularProgressIndicator的value如果設(shè)置為null链蕊，會(huì)形成一個(gè)永不停止的動(dòng)畫事甜，很有l(wèi)oading動(dòng)畫的風(fēng)格，簡單的loading可以用這個(gè)一試滔韵。

輸入框

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

屬性

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

TextEditingController

TextEditingController作為TextField的controller屬性须眷。 在用戶輸入時(shí)，controller的text和selection屬性不斷的更新沟突。要在這些屬性更改時(shí)得到通知花颗，請使用controller的addListener方法監(jiān)聽控制器 。 （如果你添加了一個(gè)監(jiān)聽器惠拭，需要在State對象的dispose方法中刪除監(jiān)聽器）扩劝。該TextEditingController還可以讓您控制TextField的內(nèi)容。最常見的是TextEditingController.text用來獲取當(dāng)前輸入框的內(nèi)容职辅，TextEditingController.clear清空輸入框的內(nèi)容棒呛。

InputDecoration

InputDecoration主要用于控制TextField的外觀以及提示信息等。主要可以設(shè)置前綴樣式域携、后綴樣式等簇秒，屬性很多，這里借用下網(wǎng)上的勞動(dòng)成果涵亏，具體如下：

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

斗魚頂部搜索框

斗魚頂部的搜索框前部和后面均有一個(gè)圖標(biāo)宰睡，這里一開始想用InputDecoration.prefix和InputDecoration.suffix來實(shí)現(xiàn)，但是和輸入框沒法對齊气筋，因此這里就沒用這倆屬性拆内。

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) {
                //內(nèi)容改變的回調(diào)
                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中宠默，否則會(huì)報(bào)錯(cuò) textfield widgets require a material widget ancestor麸恍，后來發(fā)現(xiàn)用Material包裹也行
3. TextField的prefixIcon和prefix不好用，prefixIcon限制了類型搀矫，prefix的對齊效果賊差抹沪，建議還是用Row包裹Image+TextField實(shí)現(xiàn)圖標(biāo)后面緊跟輸入框的視圖。
4. TextField的最大限制輸入maxLength設(shè)置之后導(dǎo)致右下角會(huì)冒出個(gè)計(jì)數(shù)器角標(biāo)瓤球，而且消不掉融欧，這就尷尬了，感覺只能在onChanged里面處理了卦羡。

對話框

SimpleDialog & AlertDialog & AboutDialog

1. SimpleDialog噪馏，一般可以利用多個(gè)SimpleDialogOption為用戶提供了幾個(gè)選項(xiàng)。
2. AlertDialog绿饵，警告對話框欠肾。警告對話框有一個(gè)可選標(biāo)題title和一個(gè)可選列表的actions選項(xiàng)。
3. AboutDialog拟赊，關(guān)于對話框刺桃。提供一個(gè)app信息的對話框

展示 & 隱藏

1. 對話框本質(zhì)上是屬于一個(gè)路由的頁面route，由Navigator進(jìn)行管理吸祟，所以控制對話框的顯示和隱藏瑟慈，也是調(diào)用Navigator.of(context)的push和pop方法。
2. 在Flutter中屋匕，提供了showDialog()封豪、showGeneralDialog()、showCupertinoDialog()炒瘟，其中調(diào)用showDialog()方法展示的是material風(fēng)格的對話框吹埠，調(diào)用showCupertinoDialog()方法展示的是ios風(fēng)格的對話框。而這兩個(gè)方法其實(shí)都會(huì)去調(diào)用showGeneralDialog()方法疮装，可以從源碼中看到最后是利用Navigator.of(context, rootNavigator: true).push()一個(gè)頁面缘琅。這里我在android上使用showCupertinoDialog()，出現(xiàn)的漸變動(dòng)畫會(huì)有一點(diǎn)卡頓廓推，另外還有一個(gè)showAboutDialog()刷袍，打開的是一個(gè)關(guān)于的對話框。

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

自定義對話框

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

1. 在Dialog提供了child參數(shù)供寫視圖界面
2. 繼承Dialog類樊展，就需要重寫build函數(shù)呻纹。

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

[站外圖片上傳中...(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),//
            ),//底部那個(gè)大白框
            _LogoImg(),//上面那個(gè)鯊魚娘
            _MainWidget()//最主要的操作面板
          ],
        )));
  }
}

PS

1. 按照我們公司的UI以往的設(shè)計(jì)方案（坑爹尿性）來看淑仆，基本上用Flutter自帶的Dialog樣式固定，基本上沒啥用了哥力，還是自定義吧~~
2. 繼承Dialog類蔗怠，重寫build函數(shù)時(shí)會(huì)發(fā)現(xiàn)里面所有的Text控件會(huì)默認(rèn)有個(gè)雙下劃波浪線，不知道為啥這么設(shè)置吩跋。寞射。。

總結(jié)

1. 不同于android的控件锌钮，F(xiàn)lutter的控件很少能夠自己設(shè)置寬高桥温，基本上都需要被包裹在Container里面才行。
2. 使用本地文件梁丘，除了導(dǎo)入文件之外策治，還需要在項(xiàng)目根目錄下的pubspec.yaml文件中的assets:目錄下添加該文件
3. 實(shí)際寫布局的時(shí)候會(huì)發(fā)現(xiàn)層級很深，導(dǎo)致代碼里的child一個(gè)接一個(gè)兰吟，建議最好不要超過三層通惫，如果超過寫在新的方法體內(nèi)，否則極難閱讀混蔼。
4. 控件里的屬性并不是不設(shè)置就沒有履腋，例如button里面的splashColor不設(shè)置會(huì)使用默認(rèn)的，如果想不使用該屬性惭嚣，需要自己設(shè)置遵湖。
5. 部分控件屬性極多，不需要完全搞明白晚吞，弄明白重要的就行