Flutter的Row和Column简介

简介: Flutter的Row和Column简介

Row、Column的介绍

Row:水平布局,在水平方向上排列子widget的列表。

Column:垂直布局,在垂直方向上排列子widget的列表。


说明:Row和Column是多子节点空间,他们不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示。


属性

mainAxisAlignment:主轴对齐方式,可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly;


mainAxisSize:主轴大小,可以选择min、max;


crossAxisAlignment:横轴对齐方式;


textDirection:文字方向;


verticalDirection:垂直方向;


children:子控件。


Expanded

这个是Row/Column的内的小控件,可以用来实现权重的布局,这个很有用。它必须是Row、Column或Flex的后代,并且从Expanded到其封闭行、列或Flex的路径必须仅包含StatelessWidget或StatefulWidget(而不是其他类型的小部件,如RenderObjectWidget)。


实例

Container(
          color: Colors.grey,
          padding: EdgeInsets.only(top: 10, bottom: 10),
          margin: EdgeInsets.only(top: 10),
          child: Row(
            children: [
              Expanded(
                child: Text(
                  'Deliver features faster',
                  textAlign: TextAlign.center,
                ),
                flex: 1,
              ),
              Expanded(
                flex: 1,
                child: Text(
                  'Craft beautiful UIs',
                  textAlign: TextAlign.center,
                ),
              ),
              Expanded(
                child: FlutterLogo(),
                flex: 1,
              ),
              Expanded(child: FlutterLogo(),
                flex: 1,
              ),
              FlutterLogo(),
              Expanded(
                  child:FittedBox(
                    fit: BoxFit.contain,
                    child: FlutterLogo(),
                  )
              ),
              Expanded(
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: FlutterLogo(),
                ),
              )
            ],
          ),
        ),

这里举了一个Row的例子,Column的使用类似。

效果如图


ec6990f3ac52b01f76e5017038895393.png


相关文章
关于 Flutter中的TextFiled不可以直接在Row中使用的问题
TextFiled不可以直接在Row中使用的问题,报错简单修改方法
|
Dart 前端开发 Java
《深入浅出Dart》Flutter简介
Flutter简介 Flutter是由Google开发和维护的开源框架,自2017年以来,已经迅速获得了开发者社区的广泛认可。其主要目的是开发出高性能、高保真的移动应用程序,用于iOS和Android两个主要平台。 Google创建Flutter的初衷是解决跨平台开发中的一些普遍问题,包括性能瓶颈,不同平台的UI不一致等。Google希望Flutter能够创建美观、流畅且用户体验接近原生应用的应用程序。目前,Flutter已经逐步扩展到其他平台,如Web、桌面应用和嵌入式系统。
169 0
flutter- Row Column Expanded ListView
flutter- Row Column Expanded ListView
Flutter 一行Row中显示RadioListTile
Flutter 一行Row中显示RadioListTile
234 0
|
开发框架 Rust Dart
Flutter、Electron 和 Tauri 框架简介
Flutter、Electron 和 Tauri 框架简介
499 0
|
Dart API Android开发
带你读《深入浅出Dart》二十二、Flutter简介
带你读《深入浅出Dart》二十二、Flutter简介
192 0
|
数据库 数据库管理
Flutter中的sqflite包使用简介
Flutter中的sqflite包使用简介
|
Java Android开发 iOS开发
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
529 1
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
|
存储 前端开发 iOS开发
flutter系列之:UI layout简介
对于一个前端框架来说,除了各个组件之外,最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout,就是用来描述如何将组件进行摆放的一个约束。 在flutter中,基本上所有的对象都是widget,对于layout来说也不例外。也就是说在flutter中layout也是用代码来完成的,这和其他的用配置文件来描述layout的语言有所不同。 你可以把layout看做是一种看不见的widget,这些看不见的widget是用来作用在可见的widget对象上,给他们实施一些限制。
flutter系列之:UI layout简介
|
Dart NoSQL JavaScript
Flutter 网络请求王者 Dio 简介
窥一貌而知全部,作为网络请求框架, dio不仅简单易用。而且还具备强大的高级功能。本篇对dio做了基本的介绍以及获取列表数据的示例。
761 0

热门文章

最新文章

  • 1
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    225
  • 2
    通过外部链接启动 Flutter App(详细介绍及示例)
    295
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    854
  • 4
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    471
  • 5
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    277
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    411
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    200
  • 8
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    216
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    469
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    249