Flutter基础widgets教程-Row篇

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

1 Row

Row是一个用于水平展示多个子控件的控件。row这个控件不会滚动。如果你有一行控件在空间不足的情况下可以滚动,考虑使用ListView类。

2 构造函数

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

复制

3 常用属性

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

3.1.1 子组件在 Row 中顶部对齐

CrossAxisAlignment:CrossAxisAlignment.start,

复制

3.1.2 子组件在 Row 中底部对齐

CrossAxisAlignment:CrossAxisAlignment.end,

复制

3.1.3 子组件在 Row 中居中对齐

CrossAxisAlignment: CrossAxisAlignment.center,

复制

3.1.4 拉伸填充满父布局

CrossAxisAlignment:CrossAxisAlignment.stretch,

复制

3.1.5 在 Row 组件中会报错

CrossAxisAlignment:CrossAxisAlignment.baseline,

复制

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

3.2.1 靠左排列

mainAxisAlignment:MainAxisAlignment.start,

复制

3.2.2 靠右排列

mainAxisAlignment:MainAxisAlignment.end,

复制

3.2.3 居中排列

mainAxisAlignment:MainAxisAlignment.center,

复制

3.2.4 每个子组件左右间隔相等,也就是 margin 相等

mainAxisAlignment:MainAxisAlignment.spaceAround,

复制

3.2.5 两端对齐,也就是第一个子组件靠左,最后一个子组件靠右,剩余组件在中间平均分散排列

mainAxisAlignment:MainAxisAlignment.spaceBetween,

复制

3.2.6 每个子组件平均分散排列,也就是宽度相等

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 Row 从下至上开始摆放子组件,此时我们看到的底部其实是顶部

verticalDirection: VerticalDirection.up,

复制

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

verticalDirection: VerticalDirection.down,

复制

3.6 children Row的子widget

children: <Widget>[],
相关文章
|
13天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
64 0
|
3月前
|
开发者 Windows
Flutter笔记:Widgets Easier组件库(9)使用弹窗
Flutter笔记:Widgets Easier组件库(9)使用弹窗
107 3
|
3月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记:Widgets Easier组件库-使用隐私守卫
Flutter笔记:Widgets Easier组件库-使用隐私守卫
50 2
|
3月前
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
59 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(5)使用加减器
Flutter笔记:Widgets Easier组件库(5)使用加减器
77 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(4)使用按钮组
Flutter笔记:Widgets Easier组件库(4)使用按钮组
33 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
44 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
48 1
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
110 0
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
74 0