[移动开发] Flutter——最详细的Column（纵向）布局使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Flutter——最详细的Column（纵向）布局使用 -> 正文阅读

[移动开发]Flutter——最详细的Column（纵向）布局使用

Column简介

排布方向为竖向（纵向）的布局，可容纳多个组件；

属性	作用
mainAxisAlignment	主轴对齐
crossAxisAlignment	横轴对齐
textBaseline	文字基线
textDirection	竖直方向
mainAxisSize	主轴尺寸
children	子布局单位：（数组）

创建一个纵向排列布局

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 100,
      color: Colors.yellow,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 100,
            color: Colors.red,
            child: Text('top'),
          ),
          Container(
            width: 100,
            color: Colors.green,
            child: Text('center'),
          ),
          Container(
            width: 100,
            color: Colors.blueAccent,
            child: Text('bottom'),
          ),
        ],
      ),
    );
  }
}

属性： crossAxisAlignment: CrossAxisAlignment.start
在这里插入图片描述

属性： crossAxisAlignment: CrossAxisAlignment.center
在这里插入图片描述

属性： crossAxisAlignment: CrossAxisAlignment.end
在这里插入图片描述
属性： crossAxisAlignment: CrossAxisAlignment.stretch

相当于子布局宽度铺满

在这里插入图片描述
属性： mainAxisAlignment: MainAxisAlignment.end

属性： mainAxisAlignment: MainAxisAlignment.center

属性： mainAxisAlignment: MainAxisAlignment.spaceEvenly
在这里插入图片描述

属性： mainAxisAlignment: MainAxisAlignment.spaceAround
在这里插入图片描述
属性： mainAxisAlignment: MainAxisAlignment.spaceBetween

常用属性

Expanded（展开）

使用场景：当某子布局需要沿着主轴填充高度时使用，外部包裹Expanded属性

          Expanded(
            child: Container(
              width: 100,
              color: Colors.green,
              child: Text('center'),
            ),
          ),

在这里插入图片描述
可以看到填充了父布局剩余高度。

Expanded：filex属性

使用场景：相当于布局权重，沿着主轴等比分配高度

Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: Container(
              width: 100,
              color: Colors.red,
              child: Text('top'),
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              width: 100,
              color: Colors.green,
              child: Text('center'),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              width: 100,
              color: Colors.blueAccent,
              child: Text('bottom'),
            ),
          ),
        ],
      )