flutter從入門到精通五

時間 2019-11-08

標籤 flutter 入門精通简体版

原文原文鏈接

在flutter的世界裏，一切都是Widget，圖像，文本，佈局模型等等，一切都是Widgetflutter中，儘可能將Widget放在MaterialApp。其封裝了所須要的一些Widget，MaterialApp通常做爲頂層widget，而在MaterialApp內部設置Scaffold，由於Scaffold提供了頁面banner等佈局基本實現，以下：app

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text(
            'flutter Demo'
            )
        ),
        body: HomeCenter()
      )
    );
  }複製代碼

若是須要設置一個Widget的margin，padding，background等屬性，能夠將該Widget放置在 Container裏面，以下：
less

Center(
      child: Container(
        child: Text('我是一個txt'),
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.all(
            color: Colors.green,
            width: 2.0
          )
        ),
      )複製代碼

若是須要設置一段文字的字體，顏色等，能夠經過下面屬性：ide

Text(
          '我是一個txt',
          textAlign: TextAlign.center,
          style: TextStyle(
            decoration: TextDecoration.lineThrough
          ),
       )複製代碼

列表組件
能夠分爲垂直列表。水平列表。動態列表。矩陣列表
flutter中使用頻率最高的就是垂直（Column）或者水平佈局（Row）,
其實界面的骨架均可以使用Column和Row實現，可使用 mainAxisAlignment 和 crossAxisAlignment 屬性控制行或列如何對齊其子項。對於一行（Row）來講，主軸水平延伸，交叉軸垂直延伸。對於一列來講，主軸垂直延伸，交叉軸水平延伸。

除了經過Row和Column佈局列表，還可使用 ListView進行佈局，區別就是ListView能夠自適應寬度和高度，用法以下：佈局

ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
            //ListTile 一般用於在 Flutter 中填充 ListView
        ListTile(
                //主標題
          title: Text( '大標題1',),
            //副標題        
          subtitle: Text('小標題1')
        ),
    )複製代碼

將圖像或圖標添加到列表的開頭。這一般是一個圖標。字體

ListTile(
  leading: CircleAvatar(
    backgroundImage: NetworkImage(imageUrl),
  ),
  title: Text('Horse'),
)複製代碼

設置拖尾將在列表的末尾放置一個圖像。這對於指示主-細節佈局特別有用。flex

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
)複製代碼

經過scrollDirection屬性一個列表究竟是水平列表仍是垂直列表(默認是垂直列表)scrollDirection: Axis.horizontal
GridView用於建立網格佈局，注意必定要有crossAxisCount，指定網格佈局多少列，不然界面沒法顯示，示例以下：
ui

GridView.count(
      // 控制多少列,下面表示顯示3列
      crossAxisCount: 3,
      children: this._getData()
    )複製代碼

除了能夠經過Container控制padding，還能夠直接經過Padding控制，以下：
this

Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Container(width: 30, height: 30, color: Colors.yellow),
        )複製代碼

Expanded能夠控制一個元素延伸以佔據剩餘空間，當要控制多個Expanded佔據比例，可使用flex，以下：
url

Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: IconContainer(Icons.search,Colors.red)
          ),
          Expanded(
            flex: 2,
            child: IconContainer(Icons.search,Colors.yellow)
          ),
          Expanded(
            flex: 1,
            child: IconContainer(Icons.search,Colors.black)
          )
        ],
      )複製代碼

若是須要實現絕對定位和相對定位，可使用Stack層疊組件，Stack與Align，Stack與Positioned實現定位佈局
spa

Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Icon(Icons.home,size:40,color:Colors.white)
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search,size:40,color:Colors.white)
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.send,size:40,color:Colors.white)
            )
          ],
      )
    //經過Positioned，能夠有left和top實現更加精確的定位
    Stack(
          children: <Widget>[
            Positioned(
              left: 100,
              top: 100,
              child: Icon(Icons.home,size:40,color:Colors.white)
            ),
            Positioned(
              left: 50,
              child: Icon(Icons.search,size:40,color:Colors.white)
            ),
            Positioned(
              bottom: 0,
              child: Icon(Icons.send,size:40,color:Colors.white)
            )
          ],
      )            複製代碼

若是想實現卡片的效果，可使用Card

Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              // 配置子元素的寬高比
              AspectRatio(
                aspectRatio: 20/9,
                child: Container(
                  color: Colors.red,
                )
              ),
              ListTile(
                leading: ClipOval(
                  child: Container(width: 50,height: 50,color: Colors.yellow)
                ),
                title: Text('標題'),
                subtitle: Text('副標題'),
              )
            ],
          ),
        )複製代碼

頁面插入圖片根據圖片組件Image，主要有兩種方法：

遠程圖片：Image.network。將圖片的url做爲參數傳給network便可,以下：

Image.network(
          'https://himg2.huanqiucdn.cn/attachment2010.jpg',
          // 方位，能夠設置圖片的方位
          alignment: Alignment.center,
          // cover是項目中最經常使用的
          fit: BoxFit.cover
        )複製代碼

若是想要設置一個圓形圖片，能夠用ClipOval包裹住Image，以下：

ClipOval(
          child: Image.network(
            'https://himg2.huanqiucdn.cn/attachment2010.jpg',
            width: 300,
            height: 300,
            fit: BoxFit.cover
            ),
        )複製代碼