Flutter基础widgets教程-Column篇

简介: Flutter基础widgets教程-Column篇

1 Column

Column是在垂直方向上排列子widget的列表。

2 构造函数

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment,
    MainAxisSize mainAxisSize,
    CrossAxisAlignment crossAxisAlignment,
    TextDirection textDirection,
    VerticalDirection verticalDirection,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })

复制

3 常用属性

3.1 crossAxisAlignment:子组件沿着 Cross 轴(在 Column 中是纵轴)如何摆放,其实就是子组件对齐方式

3.1.1 垂直主轴方向(水平方向)左侧对齐

CrossAxisAlignment:CrossAxisAlignment.start,

复制

3.1.2 垂直主轴方向(水平方向)右侧对齐

CrossAxisAlignment:CrossAxisAlignment.end,

复制

3.1.3 垂直主轴方向(水平方向)居中对齐

CrossAxisAlignment: CrossAxisAlignment.center,

复制

3.1.4 垂直主轴方向(水平方向)拉伸子child

CrossAxisAlignment:CrossAxisAlignment.stretch,

复制

3.1.5 这个要和textBaseline一起使用

CrossAxisAlignment:CrossAxisAlignment.baseline,

复制

3.2 mainAxisAlignment:子组件沿着 Main 轴(在 Column 中是横轴)如何摆放,其实就是子组件排列方式

3.2.1 沿着主轴方向(垂直方向)顶部对齐

mainAxisAlignment:MainAxisAlignment.start,

复制

3.2.2 沿着主轴方向(垂直方向)底部对齐

mainAxisAlignment:MainAxisAlignment.end,

复制

3.2.3 沿着主轴方向(垂直方向)居中对齐

mainAxisAlignment:MainAxisAlignment.center,

复制

3.2.4 把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面

mainAxisAlignment:MainAxisAlignment.spaceAround,

复制

3.2.5 沿着主轴方向(垂直方向)平分剩余空间

mainAxisAlignment:MainAxisAlignment.spaceBetween,

复制

3.2.6 把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别

mainAxisAlignment:MainAxisAlignment.spaceEvenly,

复制

3.3 mainAxisSize:Main 轴大小

3.3.1 相当于 Android 的 match_parent

mainAxisSize:MainAxisSize.max,

复制

3.3.2 相当于 Android 的 wrap_content

mainAxisSize:MainAxisSize.min,

复制

3.4 textDirection:子组件排列顺序

3.4.1 从左往右开始排列

textDirection: TextDirection.ltr,

复制

3.4.2 从右往左开始排列

textDirection: TextDirection.rtl,

复制

3.5 verticalDirection:确定如何在垂直方向摆放子组件,以及如何解释 start 和 end,指定 height 可以看到效果

3.5.1 Column 从下至上开始摆放子组件,此时我们看到的底部其实是顶部

verticalDirection: VerticalDirection.up,

复制

3.5.2 Column 从上至下开始摆放子组件,此时我们看到的顶部就是顶部

verticalDirection: VerticalDirection.down,

复制

3.6 children column的子widget

children: <Widget>[],
相关文章
|
3月前
|
索引
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
32 0
|
3月前
|
Android开发 iOS开发
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
54 0
|
3月前
|
开发者
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
34 0
|
3月前
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
30 0
|
7月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget
|
Web App开发 JavaScript 应用服务中间件
Flutter Web网站搭建教程
曾几何时,你有没有一个搭个人网站的冲动,我这个想法在我第一次开始写博客就有了,可就是没有搭起来,直到我看到flutter有了web支持,我就在想,是时候了,必须且一定要做,于是乎我就搭建了现在的网站ibaozi.cn
420 0
Flutter Web网站搭建教程
|
XML Java Android开发
Flutter(四)——基础组件
Flutter(四)——基础组件
325 0
Flutter(四)——基础组件
|
存储 索引
Flutter从0到1实现高性能、多功能的富文本编辑器(基础实战篇)
在上一章中,我们分析了一个富文本编辑器需要有哪些模块组成。在本文中,让我们从零开始,去实现自定义的富文本编辑器。
|
Android开发 开发者
Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)
在上一节我们已经讲了Flutter路由管理与Navigator基础使用,有兴趣或者对这一块还不太了解的同学可以去看看。 但是仅仅这样时不够的 在实际项目中这些怎么会够呢???现在让我们来看看这些骚操作…
Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)