Flutter 组件学习 - Column widget

最新推荐文章于 2023-04-10 23:28:23 发布

baiyicg

最新推荐文章于 2023-04-10 23:28:23 发布

阅读量206

点赞数

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/baiyicg/article/details/107136461

版权

flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

官网连接：Flutter

1、列布局： column widget

column 内是一个包含多个元素的数组children。

2、对齐方式

①默认方式：根据最长的内容进行居中对齐。
默认对齐

②使用 crossAxisAlignment 属性设置。

【使用 column 组件时，
主轴 mainAxisAlignment是垂直方向，
副轴 crossAxisAlignment 是水平方向。
使用 row 组件则相反。】

start 左对齐
center 居中对齐
end 右对齐

在这里插入图片描述

3、设置了主轴与副轴的对齐方式，但是整个column 组件还不在屏幕的中间，此时给column 组件外面套一层 Center( ) 组件就可以。

①此时设置了主轴与副轴的居中对齐
修改前

② 给 column 套一层 Center( )
修改后

4、使用 Expanded( ) 灵活布局

实现头部与底部固定，中间撑开。
灵活布局

5、完整代码

import 'package:flutter/material.dart';

//主入口方法
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('垂直方向布局'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('啊啊啊啊啊啊啊啊啊'),
              Text('ddddddddddddddddddddddddddddddd'),
              Text('uuiiujhujhhhhhhhhhhhhh'),
            ],
          ),
        ),
      ),
    );
  }
}