Flutter——最详细的Column(纵向)布局使用

Posted 怀君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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'),
            ),
          ),
        ],
      )

效果能够看出,center布局的高度,是topbottom布局的两倍。

以上是关于Flutter——最详细的Column(纵向)布局使用的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 基础控件之 Row 横向布局 Column 纵向布局

Flutter的MainAxisAlignment用法

UIStackView使用介绍

Flutter——最详细Stack(堆叠布局)使用教程

Flutter——最详细的Row(横向)布局使用教程

Flutter——最详细的Row(横向)布局使用教程