flutter小記之頁面佈局(二)

頁面佈局

若是小夥伴是從前端過來的，那麼應該會對頁面佈局這塊感到熟悉，跟css頁面的佈局有點相似.每一個控件的屬性可能要用到才能知道，下面記錄一些經常使用的。

Row、Column、

最多見的佈局控件，能夠建立行或列，子控件添加到Row或Column控件。 mainAxisAlignment、crossAxisAlignment 控制行或者列如何對齊子控件。 對於行，主軸水平運行，橫軸垂直運行。 對於列，主軸垂直運行，橫軸水平運行。

Row(
  children: <Widget>[
    const FlutterLogo(),
    const Expanded(
      child: Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
    ),
    const Icon(Icons.sentiment_very_satisfied),
  ],
)

複製代碼

## stack

有點像css的絕對佈局，能夠在上面寫widget

```dart
Stack(
  fit: StackFit.loose,
  alignment: Alignment.center,
  children: <Widget>[
    Text('hello'),
    Positioned(
     bottom: 10,
     child: Text('world'),
   )
 ],
),

複製代碼

Expanded Flexible

Expanded繼承自 Flexible， Expanded控件具備一個flex屬性，一個肯定控件的彈性係數的整數，Expanded控件的默認flex係數爲1。

要建立一組三個控件，其中中間的控件是其餘兩個控件的兩倍，則將中間控件的彈性係數設置爲2

Center(
          child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
            Expanded(
              child: Container(alignment: Alignment.center, color: Colors.red),
            ),
            Expanded(
                flex: 2,
                child:
                    Container(alignment: Alignment.center, color: Colors.blue)),
            Expanded(
                child: Container(
                    alignment: Alignment.center, color: Colors.yellow)),
          ]),
        )
複製代碼

如下是經典的排列方式

 Center(
          child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
            Flexible(
                fit: FlexFit.loose,
                child:
                    Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Flexible(
                      child: Container(
                        alignment: Alignment.center,
                        color: Colors.red,
                        child: Text('1'),
                      ),
                    ),
                    Flexible(
                      child: Container(
                        alignment: Alignment.center,
                        color: Colors.yellow,
                        child: Text('1'),
                      ),
                    ),
                    Flexible(
                      child: Container(
                        alignment: Alignment.center,
                        color: Colors.blue,
                        child: Text('1'),
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      color: Colors.yellow,
                      child: Text('1'),
                    ),
                    Container(
                      alignment: Alignment.center,
                      color: Colors.blue,
                      child: Text('1'),
                    ),
                  ],
                )),
            Flexible(
              flex: 1,
              child: Container(alignment: Alignment.center, color: Colors.blue),
            ),
            Flexible(
                flex: 1,
                child: Container(
                    alignment: Alignment.center, color: Colors.yellow))


複製代碼

List

//list
    SliverFixedExtentList(
    itemExtent: 50.0,
    delegate:
        SliverChildBuilderDelegate((BuildContext context, int index) {
        //建立列表項
        return Container(
        alignment: Alignment.center,
        color: Colors.lightBlue[100 * (index % 9)],
        child: Text('list item $index'),
        );
    }, childCount: 50 //50個列表項
            ),
    ),



複製代碼

Grid

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, //每行三列
        childAspectRatio: 1.0 //顯示區域寬高相等 數字越大 表明 一行放進去的東西越多
        ),
    itemCount: _icons.length,
    itemBuilder: (context, index) {
        //若是顯示到最後一個而且Icon總數小於200時繼續獲取數據
        if (index == _icons.length - 1 && _icons.length < 200) {
        _retrieveIcons();
        }
        return Container(
            decoration: BoxDecoration(
            color: Colors.grey,
            borderRadius: BorderRadius.circular(4),
            ),
            child: Icon(_icons[index])
);

複製代碼

//還有一種是直接採用
    sliver: SliverGrid(
    //Grid
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, //Grid按兩列顯示
    mainAxisSpacing: 20.0, //上下的間距
    crossAxisSpacing: 20.0, //左右的間距
    childAspectRatio: 4.0,
    ),
    delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
        //建立子widget
        return Container(
        alignment: Alignment.center,
        color: Colors.cyan[100 * (index % 9)],
        child: Text('grid item $index'),
        );
    },
    childCount: 20,
    ),



複製代碼

NestedScrollView

import 'package:flutter/material.dart';

class GraidPage extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() => _GraidPageState();
}

class _GraidPageState extends State<GraidPage> {
  final String title = 'appbar';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Text(title),
            )
          ];
        },
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return ListItemDemo('標題_$index');
          },
          itemCount: 50,
        ),
      ),
    );
  }
}

class ListItemDemo extends StatelessWidget {
  final String title;
  ListItemDemo(this.title);
  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: ListTile(
        leading: Icon(Icons.ac_unit),
        title: Text(title),
      ),
    );
  }
}
複製代碼

SingleChildSriollView

Container(
            child: Column(
          children: <Widget>[
            Container(
              height: 52,
              child: SingleChildScrollView(
                child: Container(
                    width: double.infinity,
                    padding: const EdgeInsets.all(20),
                    color: const Color.fromARGB(26, 192, 186, 186),
                    child: Text(
                      '【魯哈尼警告英國：將面臨扣押伊朗油輪的後果】當地時間10日，據伊朗塔斯尼姆通信社報道，伊朗總統魯哈尼表態稱，英國將由於扣押油輪而面臨「後果」。魯哈尼稱，「大家（英國）是不穩定的始做俑者，很快大家將意識到後果。」魯哈尼還表示，伊朗提升濃縮鈾丰度是出於和平目的，是爲發電廠提供燃料。 ​​​​',
                      maxLines: 5,
                    )),
              ),
            )
          ],
        )));




複製代碼