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、桌面应用和嵌入式系统。
186 0
flutter- Row Column Expanded ListView
flutter- Row Column Expanded ListView
Flutter 一行Row中显示RadioListTile
Flutter 一行Row中显示RadioListTile
260 0
|
开发框架 Rust Dart
Flutter、Electron 和 Tauri 框架简介
Flutter、Electron 和 Tauri 框架简介
591 0
|
数据库 数据库管理
Flutter中的sqflite包使用简介
Flutter中的sqflite包使用简介
|
Dart API Android开发
带你读《深入浅出Dart》二十二、Flutter简介
带你读《深入浅出Dart》二十二、Flutter简介
222 0
|
Java Android开发 iOS开发
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
567 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做了基本的介绍以及获取列表数据的示例。
804 0