Flutter:垂直布局组件:Column

xiaohai 2021-08-16 08:18:40 194人围观 标签: Flutter 
简介垂直布局组件Column也是一种非常常用的组件,跟水平布局组件的使用方式一致。

垂直布局组件Column也是一种非常常用的组件,跟水平布局组件的使用方式一致。

Row组件常用属性:

属性名 类型 说明
mainAxisAlignment MainAxisAlignment 主轴的排列方式
crossAxisAlignment MainAxisAlignment 次轴的排列方式
mainAxisSize MainAxisSize 主轴应该占据的空间

对于Column组件来说,主轴就是垂直方向,次轴就是水平方向。

Column组件Demo
import 'package:flutter/material.dart';

class LayoutColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('垂直布局组件:Column'),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Column(
        //主轴对齐
        mainAxisAlignment: MainAxisAlignment.center,
        //次轴对齐
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("Column Text Top"),
          Icon(Icons.add),
          Text("Column Text Bottom")
        ],
      ),
    );
  }
}

图片alt