flutter布局详解及代码示例（上）

布局

基本布局

• Row（水平布局）：在水平（X轴）方向上排列子widget的列表。
• Column（垂直布局）：在垂直（Y轴）方向上排列子widget的列表。
• Stack（可重叠布局）：可以允许其子widget简单的堆叠（Z轴）在一起。
• IndexedStack（单一显示可重叠布局）：相比Stack后面编码的widget显示在Z轴上方，IndexedStack通过index可以控制显示哪个widget显示在Z轴的上方，注意，只显示一个。
• ListView（滚动列表）：最常用的滚动widget。

Row

• 不带滚动属性，如果超出约束范围，在debug版本下会提示溢出。

代码

Row(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: [
       new Text('1'),
       new Text('2'),
       new Text('3'),
   	],
)

常用参数

mainAxisAlignment

• X轴方向上的对齐方式
• spaceBetween：沿X轴方向均分，子widget之间的空白区域相等，两侧贴边，比如只有两个子widget就在两边，三个就左中右这样。
• spaceAround：沿X轴方向均分，左右两侧不贴边，有空白区域，但空白区域是子widget之间的空白区域的1/2。
• spaceEvenly：沿X轴方向均分，左右两侧不贴边，有空白区域，空白区域和子widget之间的空白区域大小一致。

crossAxisAlignment

• Y轴方向上的对齐方式
• stretch：让子widget充满Y轴。
• baseline：在Y轴上和基线适配，搭配textBaseline用

textBaseline

• 文本内容的基线类型，就是文本的水平边界线，注意，只有水平
• alphabetic：以字母字符底部的水平线对齐（不论中英文，都是用文字的最底部对齐）
• ideographic：以表意字符的水平线对齐。（英文如pgj这些底部会比中文矮一些）

mainAxisSize

• X轴方向应占用多少空间，默认最大化的占用主轴空间。
• 若为MainAxisSize.min，则mainAxisAlignment只能为start。

verticalDirection

• 垂直方向上的排列顺序
• up：子widget从bottom开始往top排列；
• down：子widget从top开始往bottom排列。
• 搭配crossAxisAlignment的start和end属性有如下不同：
  

textDirection

• 与verticalDirection类似，水平方向上的排列顺序
• ltr：left to right，从左到右排列；
• rtl：rigth to left，从右到左排列；
• 同verticalDirection类似，搭配mainAxisAlignment使用，如下：
  

Column

• 不带滚动属性，如果超出约束范围，在debug版本下会提示溢出。

代码

Column(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: [
       new Text('1'),
       new Text('2'),
       new Text('3'),
   	],
)

常用参数

mainAxisAlignment

• Y轴方向上的对齐方式
• spaceBetween：沿Y轴方向均分，子widget之间的空白区域相等，比如只有两个子widget就在上下，三个就上中下这样。
• spaceAround：沿Y轴方向均分，上下两侧不贴边，有空白区域，但空白区域是子widget之间的空白区域的1/2。
• • spaceEvenly：沿Y轴方向均分，上下两侧不贴边，有空白区域，空白区域和子widget之间的空白区域大小一致。

crossAxisAlignment

• X轴方向上的对齐方式
• stretch：让子widget充满X轴。
• baseline：相当于start，因为textBaseline只有水平，因为没有文字是需要人歪头90度看的。

mainAxisSize

• Y轴方向应占用多少空间，默认最大化的占用主轴空间。
• 若为MainAxisSize.min，则mainAxisAlignment只能为start。

verticalDirection

• 垂直方向上的排列顺序
• up：子widget从bottom开始往top排列；
• down：子widget从top开始往bottom排列。
• 搭配mainAxisAlignment的start和end属性有如下不同：
  

textDirection

• 与verticalDirection类似，水平方向上的排列顺序
• ltr：left to right，从左到右排列；
• rtl：rigth to left，从右到左排列；
• 同verticalDirection类似，搭配crossAxisAlignment使用，如下：
  

Stack

• 可以子widget无视位置压在另一个子widget的布局
• 内部使用Positioned定位子widget位置宽高
  • width，left和right三个属性不能同时使用，必须至少有一个属性是null；
  • height，top和bottom三个属性不能同时使用，必须至少有一个属性是null。

代码

Stack(
  alignment: Alignment(-1.0,0.0),//等价于Alignment.centerLeft
  children: [
    Positioned(child: Container(width: 100.0,height: 100.0,color: Colors.red,),),
    Positioned(child: Container(width: 90.0,height: 90.0,color: Colors.green,),),
    Positioned(child: Container(width: 80.0,height: 80.0,color: Colors.blue,),),
    new Text('-1,0\ncenterLeft',textAlign: TextAlign.left,),
  ],
)

完整示例

Container(
    width: 200,
    height: 200,
    child: Stack(
        children: [
        Positioned(
            // 若是不指定位置就是(0,0)
            // 若是不指定size就是子view的size
            // top: 50.0,
            // left: 50.0,
            child: Container(
                width: 200,
                height: 200,
            ),
        ),
        Positioned(
            top: 0.0,
            left: 190.0,
            child: Container(
            width: 10.0,
            height: 10.0,
            color: Colors.green,
            ),
        ),
        ],
    ),
);

常用参数

alignment

• 可以传递AlignmentDirectional、Alignment、FractionalOffset三大类，主要用的是带方向的AlignmentDirectional。

textDirection

• 搭配AlignmentDirectional的start或者end实现类似Row的mainAxisAlignment+textDirection的效果。

fit

• loose：从Stack传递过来的约束被解除，即：
  • 当Stack大小被限制为300*400，子widget元素的大小将可设置为，宽：0到300，高：0到400。
• expand：从Stack传递过来的约束被锁定到最大，即：
  • 当Stack大小被限制为300*400，子widget元素的大小将锁定为，宽：300，高：400。
• passthrough：不改变子组件约束条件。和loose一致。

overflow

• 是否裁剪溢出的子widget元素
• clip：裁剪溢出部分
• visible：显示溢出部分

IndexedStack

• 相比Stack多了一个index参数，控制显示哪个子widget
• 内部使用Positioned定位子widget位置宽高
  • width，left和right三个属性不能同时使用，必须至少有一个属性是null；
  • height，top和bottom三个属性不能同时使用，必须至少有一个属性是null。

代码

IndexedStack(
  sizing: StackFit.expand,
  index: 1,
  children: [
    Positioned(child: Container(width: 100.0,height: 100.0,color: Colors.red,),),
    Positioned(child: Container(width: 130.0,height: 90.0,color: Colors.green,),),
    Positioned(child: Container(width: 80.0,height: 120.0,color: Colors.blue,),),
   ],
),

index就是children的length的区间之中的值。
比如上面的代码，就只显示index为1的子widget，也就是第二个。

常用参数

• 因为只显示一个，所以Stack的常用参数基本用不到

ListView

• • listview需要拓展长度，比如是纵向的listview，就需要指定父view的height。
• 可以理解为可以滚动的Column。
• 有四种构造方式
  • List()：默认构造；
    • 直接把子widget硬编码，如果子widget较多，有性能风险。
  • ListView.builder();
    • 不带分割线
    • 懒加载，只会渲染可见的条目。
  • ListView.separated；
    • 带分割线
    • separatorBuilder是必传参数，用于构造分割线view
    • 分割线返回的是一个widget（不必一定是Divider），所以可以自定义
  • ListView.custom。
    • 搭配SliverChildBuilderDelegate自定义实现不同类型子widget，比如子widget和分割线交替出现等复杂场景。

代码

/// 默认构造
ListView(
  children: [ 
    new Text('1'),
    Divider(),
    new Text('2'),
    Divider(),
    new Text('3'),
    Divider(),
  ],
),
/// ListView.builder()构造
final List name = ['1','2','3',];
ListView.builder(
  itemCount: name.length,
  itemBuilder: (context, index) {
    return Text(name[index]);
  },
),
/// ListView.separated()构造
ListView.separated(
  itemBuilder: (context, index) {
    return Text(name[index]);
  },
  separatorBuilder: (context, index) {
    return Divider();//分割线
  },
  itemCount: name.length,
),
/// ListView.custom()
ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return Text(name[index]);
    },
    childCount: name.length,
  ),
),

详细代码

var lv1 = ListView(
    //主轴滚动方向:垂直vertical，竖直horizontal ，默认为垂直vertical,
    scrollDirection: Axis.vertical,
    //是否反向 默认为false，正常顺序从起始点开始正序，true为从末尾开始排列
    reverse: false,
    //滚动控制器,默认为null
    controller:null,
    //是否强制滚动（顶部或底部时是否可以滚动），默认是false，如果为true，Controller必须为null
    primary: false,
    //视图如何响应用户的手势滑动，有内置实现强制可以滚动 const AlwaysScrollableScrollPhysics()；和强制不可以滚动const ScrollPhysics()，可忽略primary属性
    physics: const AlwaysScrollableScrollPhysics(),
    //默认为false，滚动视图在[滚动方向]中的范围是否应由正在查看的内容决定。
    shrinkWrap: true,
    //item的padding值
    padding: const EdgeInsets.all(10.0),
    //item交叉轴方向的大小，默认自适应，vertical时为高度，horizontal时为高度
    itemExtent: 50.0,
    //是否自动保存滑出屏幕外的字widget的状态，保证widget不被回收，可复用，false的手动保存。默认为true
    addAutomaticKeepAlives: true,
    //是否放置到重绘列表中，复杂widget可提高性能，默认为true
    addRepaintBoundaries: true,
    //缓存区大小，默认为250
    cacheExtent: 250.0,
    //默认构造函数中特有，直接将子widget放置内，一次性渲染完成，适合少量数据
    children: [
        new Text('测试1'),
        Divider(),
        new Text('测试2'),
        Divider(),
        new Text('测试3'),
        Divider(),
        new Text('测试4'),
        Divider(),
        new Text('测试5'),
        Divider(),
    ],
);

每个item不同的listview

• 用switch-case返回不同的item来实现不同的item的view

import 'package:flutter/material.dart';

class MyListPage extends StatelessWidget {
  final List itemList = [
    Item(type: ItemType.button, data: ['Button 1', 'Button 2']),
    Item(type: ItemType.text, data: 'Hello World'),
    Item(
        type: ItemType.image,
        data: 'https://example.com/images/image.jpg'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My List Page'),
      ),
      body: ListView.builder(
        itemCount: itemList.length,
        itemBuilder: (BuildContext context, int index) {
          Item item = itemList[index];

          Widget itemWidget;

          // 根据item类型构建不同的widget
          switch (item.type) {
            case ItemType.button:
              List buttonTexts = item.data;
              itemWidget = Row(
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: Text(buttonTexts[0]),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text(buttonTexts[1]),
                  ),
                ],
              );
              break;

            case ItemType.text:
              String textData = item.data;
              itemWidget = Text(textData);
              break;

            case ItemType.image:
              String imageUrl = item.data;
              itemWidget = Image.network(imageUrl);
              break;
          }

          return ListTile(
            title: itemWidget,
          );
        },
      ),
    );
  }
}

class Item {
  final ItemType type;
  final dynamic data;

  Item({
    required this.type,
    required this.data,
  });
}

enum ItemType {
  button,
  text,
  image,
}

垂直滑动里嵌套水平滑动

class _PageBizCertificateState extends eState {

  final List items = List.generate(20, (index) => 'Item $index');

  @override
  Widget pageBody(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return MyListItem(title: items[index]);
      },
    );
  }

  Widget MyListItem({required String title}) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('第一行文本'),
          SizedBox(height: 8.0),
          MyHorizontalScrollList(),
          SizedBox(height: 8.0),
          Text('第三行文本'),
        ],
      ),
    );
  }

  Widget MyHorizontalScrollList() {
    return Container(
      height: 100.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            width: 100.0,
            margin: EdgeInsets.all(4.0),
            color: Colors.blue,
            child: Center(
              child: Text('水平项 $index'),
            ),
          );
        },
      ),
    );
  }

}

参数列表

• scrollDirection：主轴滚动方向；默认垂直滚动Axis.vertical，还可水平滚动Axis.horizontal
• reverse：是否反向排列，默认false，即正序排列
• controller：滚动控制器，默认为null
• primary：是否强制滚动，默认false
• physics：响应用户滑动。
  • NeverScrollableScrollPhysics(), // 禁止滑动
• shrinkWrap：滚动视图在滚动方向中的范围是否应由正在查看的内容决定。默认为false
• padding：距边框item边间距
• cacheExtent：缓存大小，默认250.0
• itemExtent：item在交叉轴方向上的长度；null时为自适应
• addAutomaticKeepAlives：是否自动保存滑出屏幕外的字widget的状态，默认true，保存，可复用
• addRepaintBoundaries：是否放置到重绘列表中；默认true，可提高性能
• itemBuilder：builder和separated构造函数特有要传入参数，定义item的样式
• separatorBuilder：separated构造函数特有要传入的参数，定义分割线的样式
• itemCount：列表可滚动的item数量，默认构造没有
• childrenDelegate：内部都是靠此类实现滚动和布局，但只有custom构造函数需要传入，其余都内部实现