【Flutter 2-7】Flutter手把手教程UI布局和Widget——垂直布局控件Column

2023-11-05

Column

Column是在Flutter中常见的布局控件,它负责垂直方向布局。Row负责水平方向布局,二者都是继承于Flex,类似于iOS里面的UIScrollView,但是又有很多不同。
先来看一下Column的构造函数

Column({
    /// key
    Key key,
    /// Column的对其方式 默认是 MainAxisAlignment.start
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    /// 表示Column在垂直方向占用的大小,默认是 max,表示尽可能的充满垂直方向空间。如果这是 min表示尽量小的占用垂直方向空间
    MainAxisSize mainAxisSize = MainAxisSize.max,
    /// 横轴对其方式 默认是 居中对齐
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    /// 子控件的布局顺序,不同国家书写习惯的不同(中文、英语从左往右书写,阿拉伯文从右往左书写),这个参数可以帮助我们调整布局显示顺序
    TextDirection textDirection,
    /// 表示垂直方向的对其方向 
    VerticalDirection verticalDirection = VerticalDirection.down,
    /// 基线对齐方式 在Row里面会有使用
    TextBaseline textBaseline,
    /// 子控件
    List<Widget> children = const <Widget>[],
}) 

mainAxisAlignment

mainAxisAlignment接收一个MainAxisAlignment类型的枚举,MainAxisAlignment共有六个枚举值,如下:

枚举值 描述
start 与 开始的位置对齐
end 与 结束的位置对齐
center 居中对齐
spaceBetween 把剩余的空间拆分成n-1份(n是子控件的个数) 每一份都插入到子控件之间
spaceEvenly 把剩余的空间拆分成n+1份(n是子控件的个数) 然后均匀分布
spaceAround 把剩余空间拆分成 2n 份(n是子控件的个数) 每个子控件上下各放一份

看描述比较晦涩,我们直接来看效果:

MainAxisAlignment.start
居顶部
2020_01_12_column_mainaxisalignment_start_1

MainAxisAlignment.center
居中间
2020_01_12_column_mainaxisalignment_center

MainAxisAlignment.end
居底部
2020_01_12_column_mainaxisalignment_end

MainAxisAlignment.spaceBetween
把剩余的空间拆分成n-1份(n是子控件的个数),这里也就是3分,每一份都插入到子控件之间。看绿色数字就是每一份的编号
2020_01_12_column_mainaxisalignment_specebtween

MainAxisAlignment.spaceEvenly

把剩余的空间拆分成n+1份(n是子控件的个数),这里也就是5分, 然后均匀分布。
2020_01_12_column_mainaxisalignment_speceevenly

MainAxisAlignment.spaceAround
把剩余空间拆分成 2n 份(n是子控件的个数),这里也就是8分,每个子控件上下各放一份
2020_01_12_column_mainaxisalignment_specearound

crossAxisAlignment

crossAxisAlignment接收一个CrossAxisAlignment枚举值,有以下5中枚举

枚举值 描述
start 与 开始的位置对齐
end 与 结束的位置对齐
center 居中对齐
stretch 水平方向扩充与Column相同大小
baseline 无效

CrossAxisAlignment.start
居左侧
2020_01_12_column_crossaxisalignment_start

CrossAxisAlignment.center
居中
2020_01_12_column_crossaxisalignment_center
CrossAxisAlignment.end
居右侧
2020_01_12_column_crossaxisalignment_end

CrossAxisAlignment.stretch
子控件的宽度拉伸到与Column相同大小
2020_01_12_column_crossaxisalignment_stretch

textDirection

textDirection参数接收一个TextDirection类型的枚举类型,它有两个不同的枚举值,如下

枚举值 描述
rtl 书写习惯是从右边开始 子控件默认从右边对齐
ltr 书写习惯是从左边开始 子控件默认从左边对齐

crossAxisAlignment参数会受到textDirection参数值影响。
如下:

  • textDirection的参数值为ltr时,crossAxisAlignment参数为CrossAxisAlignment.start这个时候子控件居左对齐。
    2020_01_12_column_ltr_start

  • textDirection的参数值为ltr时,crossAxisAlignment参数为CrossAxisAlignment.end这个时候子控件居右对齐。

2020_01_12_column_ltr_end

  • textDirection的参数值为rtl时,crossAxisAlignment参数为CrossAxisAlignment.start这个时候子控件居右对齐。

2020_01_12_column_rtl_start

  • textDirection的参数值为rtl时,crossAxisAlignment参数为CrossAxisAlignment.end这个时候子控件居做对齐。

2020_01_12_column_rtl_end

总的来说textDirection会控制书写习惯来改变布局。这个其实是在做国际化的时候用到的比较多。在下一节即将讲解的Row也相同的会收到影响。

在上面的描述中有开始的位置结束的位置,为什么不直接写左边右边,其实也是受textDirection的影响,开始的位置就是书写开始的位置,结束的位置就是写结束的位置。

想体验以上的Column的示例的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->column_page.dart查看,并且可以下载下来运行并体验。


公众号

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【Flutter 2-7】Flutter手把手教程UI布局和Widget——垂直布局控件Column 的相关文章

  • Flutter,在第1页时无法点击第2页

    我创建了一个PageView有 3 个页面 每个页面都有一个按钮 单击每个按钮应滚动到该页面 如果在第 2 页 则上一页和下一页都是可点击的 如果它位于第 3 页 则可以单击上一页 如果是在第一页 下一页不可点击 更新 当在 page1 上
  • 显示菜单位置 Flutter

    我有一个 GridView 小部件 其中包含一些用 GestureDetector 包裹的 GridTiles 当我长按它时 尝试显示一个菜单以删除 GridTile 一切都很好 除了我希望从我拥有的点开始显示该菜单点击的不是应用程序的顶部
  • Flutter:未捕获的 ReferenceError:firebase 未定义

    我在 Flutter Web 应用程序中使用 Firebase 服务 但在加载 Firebase 脚本时遇到问题 当我使用扑动时运行 d chrome我看到有错误的空白页面 重新加载页面后加载正常 当我进行 flutter build we
  • 如何在不需要打开应用程序的情况下显示对话框

    我正在寻找包或以任何方式显示弹出窗口 对话框或模式 而无需打开我的应用程序 例如 本地通知 但我不想使用本地通知进行自定义 flutter 中有类似的东西吗 在 Android 上 您可以使用使用 SYSTEM ALERT WINDOW 的
  • 带操作按钮的颤动本地通知

    我在我的 flutter 项目中尝试了 flutter 本地通知插件 它在简单通知上工作正常 但我需要带有操作按钮的通知功能 请帮助我或建议我实现此功能 不幸的是 flutter local notifications 插件尚不支持操作按钮
  • 如何为发布而不是调试创建密钥库?扑

    我按照使用此网站部署 flutter 的步骤进行操作https flutter io android release https flutter io android release 当我运行 flutter build apk 时出现此错
  • Flutter - 名称为 [DEFAULT] 的 FirebaseApp 不存在

    我正在使用 firebase 身份验证系统和 Firestore 开发一个 flutter 应用程序 我工作了3个月 之前没有遇到过这个错误 现在我在 Play 商店上发布了我的应用程序 并且我发现使用模拟器的调试版本也出现此错误 我认为已
  • Flutter 使用 RichText 填空

    我几乎完成了我的应用程序的填空实现 但不幸的是我不断遇到布局问题 然而 当我不断解决问题时 我几乎已经完成了 这是到目前为止的代码 RichText text TextSpan text dummy style TextStyle colo
  • Flutter Web 平台检查

    我正在尝试找到一种方法来查看我的 flutter web 项目正在哪个平台 iOS 或 Android 上运行 当我使用if Platform isIOS do something 我面临以下错误 Error Unsupported ope
  • Flutter 2.0 appbar 后退按钮如果包含 endDrawer 就会消失

    我刚刚将 flutter 更新到 2 0 我意识到如果 appbar 还包含 endDrawer 所有后退按钮都会消失 带有 endDrawer 的应用栏 https i stack imgur com X2jaf png 我试图摆脱 en
  • 空安全 AppLocalization 字符串的最佳方法

    Question 我在用AppLocalizations of context myString在我的 null safe flutter 应用程序中国际化字符串 我的 IDE 告诉我AppLocalizations of context
  • 使用不包含 Bloc 的上下文调用 BlocProvider.of() - 即使它包含

    首先 我确实知道 BLoC 是如何运作的 它背后的想法 我知道两者之间的区别BlocProvider and BlocProvider value 构造函数 为简单起见 我的应用程序有 3 个页面 其中有一个小部件树 如下所示 App gt
  • 颤动:所选值不显示在下拉列表中

    我正在从 SQLite 数据库填充城市名称并尝试显示为下拉列表 我通过遵循教程使其工作 但遇到了一个小问题 所选值不会显示在下拉列表中 它继续显示默认提示值 但是 我能够分配和检索正确的选定值 这是我的代码 cities dart clas
  • Flutter无法从url加载图像

    图片资源服务捕获异常 解析图像编解码器时抛出以下 ImageCodecException 加载网络图像失败 图片网址 https cdn sportmonks com images soccer leagues 5 png https cd
  • Android Studio 无法运行 Xcode 模拟器

    我正在尝试使用 Xcode iPhone 模拟器模拟我的 Flutter 应用程序 但收到此错误 在升级 Android Studio 和 Xcode 之前 它运行良好 Launching lib main dart on iPhone X
  • Flutter:如何使用 AnimatedContainer 和扩展列?

    假设我们有 3 个孩子Column Flexible flex 1 child Container color Colors red Flexible flex 3 child Container color Colors yellow F
  • 如何将 Firestore 文档数据转换为类

    在 Firestore 中 有一些文档包含 名称 大陆 等字段及其字符串值 我在主 UI 代码中使用 FutureBuilder 并调用getData 功能 这是我的代码 class DatabaseService final locati
  • 在 Flutter 中从 Play 商店获取产品时应用内购买崩溃

    我在安装和实施后遇到问题应用内购买插件 https pub dev packages in app purchaseFlutter 团队提供 到目前为止我做了什么 在 Play 商店中添加了 2 个可见且活跃的产品 提交了用于 alpha
  • dart中解析对象(不支持的操作:无法添加到固定长度列表)

    我有一个用户对象 当用户登录 注册时 该对象保存到云 Firestore 数据库中 因此 当用户登录时 将从数据库中检索用户对象 并且一切正常 直到我尝试对列表 usersProject 执行 添加 操作 Add the new proje
  • NoSuchMethodError:尝试调用非函数,例如 null:'dart.global.firebase.auth'

    Flutter 新手 我怀疑在尝试设置 Firebase Auth 时错过了一些非常简单的事情 一直在网上寻找解决方案 大多数人要求您仔细检查 firebase auth js 是否正确包含在 index html 文件中 这样就完成了 下

随机推荐

  • nvidia-smi 命令详解

    nvidia smi 命令详解 1 nvidia smi 面板解析 2 显存与GPU的区别 Reference nvidia smi命令详解 相关文章 nvidia smi nvcc V 及 CUDA cuDNN 安装 nvidia smi
  • 用Java实现简单计算器

    实训题 8 简单计算器 一 项目说明 实训目的 掌握 Java GUI 开发中的布局管理和事件处理机制 实训要求 1 要使用 java 的 GUI 设计出计算器界面 2 通过界面按钮 可以实现整数或浮点数的四则运算 并能将结果显示在界面中
  • 2020-01-24

    新年快乐 祝各位粉丝以及csdn的朋友 新年快乐 2020没有解决不了的问题 加油
  • Linux/Centos源码安装python3任意版本

    首先安装编译工具 sudo yum y install cmake3 glib2 devel libpcap libpcap devel libgcrypt devel glib2 devel qt devel qt5 qtbase dev
  • js小学生图区_多种方式实现js图片预览

    js多种方式图片预览 持续更新 设置自己的变量存储区 var Util file file image show img show Util file nchange function f if this files 0 type inde
  • IDEA 使用技巧

    1 idea展开折叠类中所有方法 展开 ctrl shift 折叠 ctrl shift 2 Idea中设置注释位置 自动缩进到合适位置
  • 【PID控制算法】

    PID控制小解 比例环节 P 成比例的反映偏差信号 偏差一旦产生 控制器立即产生控制作用 较小误差 积分环节 I 主要用于消除静态误差 提高系统得无差度 积分作用的强弱取决于积分时间常数 Ti Ti越 大 积分作用越弱 反之越强 微分环节
  • 如何改进研发项目文档内容质量?

    书接上回 研发项目文档重要吗 个人以为 改进研发项目文档内容质量 需要深入研发流程 梳理研发流程中的信息需求和依赖关系 完善相关的内容规范 模板 和评审规范 从系统上保障研发文档的质量 所以这段时间 协调痛点场景作为改进试点 参与到研发设计
  • 从控制理论的根轨迹法和稳定性分析谈到舵机PD控制代码实现

    在上一次谈到基于MPU6050的基于一阶互补滤波算法实现后 本来想接着就自适应一阶互补滤波和卡尔曼滤波再写一篇的 但是卡尔曼滤波算法我自己写出来并进行姿态解算后发现效果不很好 才疏学浅 等我调好了再写吧 昨天花了半下午做了一个基于MPU60
  • Visual Studio 2017 设置透明背景图

    一 前言 给大家分享一下 如何为VS2017设置透明背景图 下面是一张设置前和设置后的图片 设置前 设置后 二 设置背景图片的扩展程序 我们打开VS的扩展安装界面 工具 gt 扩展和更新 gt 联机 输入 Background 可以看到有两
  • Mysql偶尔连接失败的问题

    在项目中 偶尔会出现获取jdbc连接失败的报错 其中有一种因为连接失效的报错 The last packet successfully received from the server was 1 312 227 milliseconds
  • 时序预测:从两篇高影响力的论文谈起

    未来可以预测吗 本文从两篇高影响力的时序预测文章谈起 其中一篇是18年放在arXiv上的文章 文中总结性地提出了时序卷积网络 TCN Temporal Convolutional Network 短短两三年引用数已经破千 TCN作为一种基准
  • java常用集合之Map

    目录 Map集合基本内容 特点 扩容 遍历 Map集合实现 1 HashMap 基本原理 Table数组中的的Node 2 HashTable 3 ConcurrentHashMap 4 TreeMap 5 LinkedHashMap Ma
  • 关于启动fabric网络错误:cryptogen tool not found. exiting

    在启动fabric中first network网络时 需要执行一个自动化脚本 byfn sh m generate 该脚本需要自动生成相关证书信息 fabric官方提供了两款工具 configtxgen cryptogen 在脚本执行中会从
  • JUnit5学习之六:参数化测试(Parameterized Tests)基础

    项目主页 https github com zq2599 blog demos 该项目在GitHub上的主页 git仓库地址 https https github com zq2599 blog demos git 该项目源码的仓库地址 h
  • 断言(assert)的用法

    我一直以为 assert 仅仅是个报错函数 事实上 它居然是个宏 并且作用并非 报错 在经过对其进行一定了解之后 对其作用及用法有了一定的了解 assert 的用法像是一种 契约式编程 在我的理解中 其表达的意思就是 程序在我的假设条件下
  • MySQL8.0.26安装配置教程(windows 64位)

    目录 一 进入MySQL官网下载安装 二 配置并初始化MySQL 三 配置环境变量 四 检验安装 一 进入MySQL官网下载安装 进入Mysql官网MySQL 点击DOWNLOADS下拉页面点击红框内容 跳转页面后点击红框 下载后并解压到目
  • 8个Python免费网站,一周熟练Python,知道就是赚到!

    前言 Python 已经成为一种再主流不过的编程语言了 许多同学开始学习它 又不知道该如何入手 希望在一周内学习最强大和最流行的编程语言之一 是的 你读得对 如果你有奉献精神 你可以在一周内学习Python 今天呢 我给大家推荐八个免费学习
  • 教你如何有效防止DDos攻击?

    DDos又称分布式拒绝服务 DDos是利用大量合理的请求造成资源过载 导致服务不可用 就比如一个餐馆总共有100个座位 突然有一天某个商家恶意竞争 雇佣了200个人来到这个餐馆坐着不吃不喝 门口还排着长长的队 导致餐馆无法正常营业 这就是D
  • 【Flutter 2-7】Flutter手把手教程UI布局和Widget——垂直布局控件Column

    Column Column是在Flutter中常见的布局控件 它负责垂直方向布局 Row负责水平方向布局 二者都是继承于Flex 类似于iOS里面的UIScrollView 但是又有很多不同 先来看一下Column的构造函数 Column