flutter开发教程之Row使用

简介: Row是一个用于水平展示多个子控件的控件。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>[],
相关文章
|
1月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
25天前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
66 3
|
9天前
|
传感器 开发框架 物联网
鸿蒙next选择 Flutter 开发跨平台应用的原因
鸿蒙(HarmonyOS)是华为推出的一款旨在实现多设备无缝连接的操作系统。为了实现这一目标,鸿蒙选择了 Flutter 作为主要的跨平台应用开发框架。Flutter 的跨平台能力、高性能、丰富的生态支持和与鸿蒙系统的良好兼容性,使其成为理想的选择。通过 Flutter,开发者可以高效地构建和部署多平台应用,推动鸿蒙生态的快速发展。
104 0
|
11天前
|
Dart 安全 UED
Flutter&鸿蒙next中的表单封装:提升开发效率与用户体验
在移动应用开发中,表单是用户与应用交互的重要界面。本文介绍了如何在Flutter中封装表单,以提升开发效率和用户体验。通过代码复用、集中管理和一致性的优势,封装表单组件可以简化开发流程。文章详细讲解了Flutter表单的基础、封装方法和表单验证技巧,帮助开发者构建健壮且用户友好的应用。
55 0
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
73 7
|
25天前
|
编解码 Dart API
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件,实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法,并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`,使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料,帮助开发者更好地理解和实现这一过程。
50 0
|
25天前
|
Dart Android开发
鸿蒙Flutter实战:03-鸿蒙Flutter开发中集成Webview
本文介绍了在OpenHarmony平台上集成WebView的两种方法:一是使用第三方库`flutter_inappwebview`,通过配置pubspec.lock文件实现;二是编写原生ArkTS代码,自定义PlatformView,涉及创建入口能力、注册视图工厂、处理方法调用及页面构建等步骤。
44 0
|
2月前
|
JSON Dart Java
flutter开发多端平台应用的探索
flutter开发多端平台应用的探索
49 6
|
2月前
|
JSON Dart Java
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
|
2月前
|
安全 Android开发 开发者
探索安卓开发的未来:Kotlin的崛起与Flutter的挑战
在移动开发的广阔天地中,安卓平台始终占据着举足轻重的地位。随着技术的不断进步和开发者需求的多样化,Kotlin和Flutter成为了改变游戏规则的新玩家。本文将深入探讨Kotlin如何以其现代化的特性赢得开发者的青睐,以及Flutter凭借跨平台的能力如何挑战传统的安卓开发模式。通过实际案例分析,我们将揭示这两种技术如何塑造未来的安卓应用开发。
73 6