Flutter之Row/Column用法详解

最新推荐文章于 2024-05-12 22:19:21 发布
最新推荐文章于 2024-05-12 22:19:21 发布
阅读量757 收藏
点赞数
文章标签： 移动开发 c/c++
原文链接：https://juejin.im/post/5c6a5892e51d4542331c5528
版权

前言

相关文章:Flutter学习目录

github地址:Flutter学习

文章结构

  • CrossAxisAlignment Propery

    • CrossAxisAlignment.start
    • CrossAxisAlignment.center
    • CrossAxisAlignment.end
    • CrossAxisAlignment.stretch
    • CrossAxisAlignment.baseline

  • MainAxisAlignment Propery

    • MainAxisAlignment.start
    • MainAxisAlignment.center
    • MainAxisAlignment.end
    • MainAxisAlignment.spaceAround
    • MainAxisAlignment.spaceBetween
    • MainAxisAlignment.spaceEvenly

  • TextDirection Propery

    • TextDirection.ltr
    • TextDirection.rtl

  • VerticalDirection Propery

    • VerticalDirection.down
    • VerticalDirection.up

  • MainAxisSize Propery

    • MainAxisSize.max
    • MainAxisSize.min

介绍

Row

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

如果想在row上展示3个子控件，我们可以这样做。 代码如下：

//Row
class Row_Text_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Row(
          children: <Widget>[
            Container(
              color: Colors.orange,
              child: FlutterLogo(
                size: 60.0,
              ),
            ),
            Container(
              color: Colors.blue,
              child: FlutterLogo(
                size: 60.0,
              ),
            ),
            Container(
              color: Colors.purple,
              child: FlutterLogo(
                size: 60.0,
              ),
            )
          ],
        ),
    );
  }
}
复制代码

效果图如下：

Column

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

如果想在row上展示3个子控件，我们可以这样做。 代码如下：

//Column
class Column_Text_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.orange,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.green,
            child: FlutterLogo(
              size: 60.0,
            ),
          ),
          Container(
            color: Colors.purple,
            child: FlutterLogo(
              size: 60.0,
            ),
          )
        ],
      ),
    );
  }
}
复制代码

效果图如下：

一、CrossAxisAlignment Propery

Column和Row有相同的属性。所以下面的例题，我们同时展示两个控件的效果。

CrossAxis介绍

CrossAxis是交叉轴，就是与当前控件方向垂直的轴。具体效果如下图:

1.1、crossAxisAlignment.start

将子控件的起始边与crossAxis的起始边对齐。

row和Column代码如下：

//row和Column
class CrossAxisAlignment_start_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.pink),
          Icon(Icons.adjust, size: 50.0, color: Colors.purple),
          Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
          Container(
            color: Colors.orange,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
        ],
      ),
    );
  }
}
复制代码

1.2、CrossAxisAlignment.center

放置子控件，使它们的中心与十字轴的中间对齐。

1.3、CrossAxisAlignment.end

将子控件放置十字轴的末端。

1.4、CrossAxisAlignment.stretch

子控件充满十字轴

1.5、CrossAxisAlignment.baseline

将放置在屏幕上的子控件，基线匹配。 您应该将TextBaseline Class与CrossAxisAlignment.baseline一起使用。 未使用Baseline代码如下：

//CrossAxisAlignment.baseline
class CrossAxisAlignment_withOutbaseline_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
              color: Colors.yellow,
              fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
              color: Colors.blue,
              fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}
复制代码

效果图如下：

使用Baseline代码如下：

//CrossAxisAlignment.baseline
//使用
class CrossAxisAlignment_withbaseline_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,与上面搭配使用、否则会报错
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}
复制代码

效果图如下：

二、MainAxisAlignment Propery

Column和Row有相同的属性。所以下面的例题，我们同时展示两个控件的效果。

MainAxis介绍

MainAxis是主轴，就是与当前控件方向平行。具体效果如下图：

2.1、MainAxisAlignment.start

将子控件放在尽可能靠近主轴起点的位置。 代码如下：

//MainAxisAlignment Propery
//MainAxisAlignment.start
class MainAxisAlignment_start_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        //mainAxisAlignment: MainAxisAlignment.center,
        //mainAxisAlignment: MainAxisAlignment.end,
        //mainAxisAlignment: MainAxisAlignment.spaceAround,
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.pink),
          Icon(Icons.adjust, size: 50.0, color: Colors.purple),
          Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
          Container(
            color: Colors.orange,
            height: 50.0,
            width: 50.0,
          ),
          Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
        ],
      ),
    );
  }
}
复制代码

效果图如下：

2.2、MainAxisAlignment.center

将子控件放在尽可能靠近主轴中间的位置。 效果图如下：

2.3、MainAxisAlignment.end

将子控件放在尽可能靠近主轴末端的位置。 效果图如下：

2.4、MainAxisAlignment.spaceAround

子控件之间均匀分布，间距为A；但是第一个和最后一个控件距离边界的距离为子控件距离的一半，即A/2。 效果图如下：

2.5、MainAxisAlignment.spaceBetween

子控件之间均匀分布，间距为A；但是第一个和最后一个控件距离边界的距离是0。 效果图如下：

2.6、MainAxisAlignment.spaceEvenly

子控件之间均匀分布，间距为A；但是第一个和最后一个控件距离边界的距离也是A。

三、TextDirection Propery

决定水平方向上子控件的布局顺序。

这里仅以CrossAxisAlignment为例，mainAxisAlignment可以自行分析。

3.1、TextDirection.ltr

children中的子控件按照顺序，从左向右排列。默认是从左向右排列，即TextDirection.ltr。

CrossAxisAlignment.start

代码如下：

//TextDirection Propery
class TextDirection_ltr_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        textDirection: TextDirection.ltr,
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}
复制代码

效果图如下：

CrossAxisAlignment.center

效果图如下：

CrossAxisAlignment.end

效果图如下：

3.2、TextDirection.rtl

children中的子控件按照顺序，从右向左排列。

CrossAxisAlignment.start

代码如下：

//TextDirection Propery
//TextDirection.rtl
class TextDirection_rtl_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
      //child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        textDirection: TextDirection.rtl,
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}
复制代码

效果图如下：

CrossAxisAlignment.center

效果图如下：

CrossAxisAlignment.end

效果图如下：

四、VerticalDirection Propery

决定垂直方向上子控件的布局顺序；解释了垂直方向上的start和end作用。

默认是VerticalDirection.down。

这里仅以CrossAxisAlignment为例，mainAxisAlignment可以自行分析。

4.1、VerticalDirection.down

CrossAxisAlignment.start

代码如下：

//VerticalDirection Propery
//VerticalDirection.down
class VerticalDirection_down_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
      //child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        verticalDirection: VerticalDirection.down,//默认是VerticalDirection.down
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}
复制代码

效果图如下：

CrossAxisAlignment.center

效果图如下：

CrossAxisAlignment.end

效果图如下：

4.2、VerticalDirection.up

CrossAxisAlignment.start

代码如下：

//VerticalDirection Propery
//VerticalDirection.up
class VerticalDirection_up_Propery extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      //child: Row(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        //crossAxisAlignment: CrossAxisAlignment.center,
        //crossAxisAlignment: CrossAxisAlignment.end,
        verticalDirection: VerticalDirection.up,//默认是VerticalDirection.down
        children: <Widget>[
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.yellow,
                fontSize: 30.0
            ),
          ),
          Text(
            "Flutter",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0
            ),
          ),
        ],
      ),
    );
  }
}
复制代码

效果图如下：

CrossAxisAlignment.center

效果图如下：

CrossAxisAlignment.end

效果图如下：

五、MainAxisSize Propery

用来设置主轴上控件的大小。

MainAxisSize.max

根据当前的约束，最大化当前控件的可用空间。 代码如下：

//MainAxisSize Propery
//MainAxisSize.max
class MainAxisSize_max_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.yellow,
        //child: Row(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.pink),
            Icon(Icons.adjust, size: 50.0, color: Colors.purple),
            Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
          ],
        ),
      ),
    );
  }
}
复制代码

效果图如下：

MainAxisSize.min

根据当前的约束，最小化当前控件的可用空间。 代码如下：

//MainAxisSize Propery
//MainAxisSize.min
class MainAxisSize_min_Propery_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.yellow,
        //child: Row(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.pink),
            Icon(Icons.adjust, size: 50.0, color: Colors.purple),
            Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent),
            Container(
              color: Colors.orange,
              height: 50.0,
              width: 50.0,
            ),
            Icon(Icons.adjust, size: 50.0, color: Colors.cyan),
          ],
        ),
      ),
    );
  }
}
复制代码

效果图如下：

参考文章

Flutter — Row/Column Cheat Sheet

weixin_34236869
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《Flutter 控件大全》第二十五个：Row和Column
老孟Flutter
04-04 294
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和C...
flutter row 滚动_Flutter布局方式之Row
weixin_39857792的博客
11-30 1122
row概述Row即创建一个水平的组件列表，是非常常用的组件，而Column即创建一个垂直的组件列表，用法和Row一模一样，因为Row以及Column都是Flex的子类，它们的具体实现也都是由Flex完成，只是参数不同。构造函数Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, ...
Flutter 布局（七）- Row、Column详解
weixin_34023982的博客
08-01 519
本文主要介绍Flutter布局中的Row、Column控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。 1. Row A widget that displays its children in a horizontal array. 1.1 简介 在Flutter中非常常见的一个多子节点控件，将children排列成一行。估计是借鉴了Web中Flex布局，所以很多属性和表现，...
Flutter 中的 Column 小部件：全面指南
最新发布
smileKH的博客
05-12 660
Column是 Flutter 中处理垂直布局的核心小部件，它提供了丰富的对齐和间距选项，使得在 Flutter 应用中实现各种垂直布局变得简单而高效。掌握Column的使用，可以帮助你创建出既美观又实用的布局界面。
Flutter笔记 Column和Row
weixin_30266885的博客
02-27 263
MainAxisSize：　　控制自己的布局方式 　　MainAxisSize.min　　默认值，Column和Row自适应children； 　　MainAxisSize.max　　Column填充父控件竖屏，Row填充父控件横屏；需要搭配MainAxisAlignment使用才有效果； MainAxisAlignment：　　控制子集的对齐方式，Column上...
Flutter的Row和Column简介
江上清风山间明月的博客
02-14 556
Row：水平布局，在水平方向上排列子widget的列表。Column：垂直布局，在垂直方向上排列子widget的列表。说明：Row和Column是多子节点空间，他们不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。
flutter row 滚动_Flutter 基础布局Widgets之Row详解
weixin_39783857的博客
11-30 245
概述Row即创建一个水平的组件列表，是非常常用的组件，而Column即创建一个垂直的组件列表，用法和Row一模一样，因为Row以及Column都是Flex的子类，它们的具体实现也都是由Flex完成，只是参数不同。构造函数Row({ Key key, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, MainAxisSize...
【flutter】Row和Column组件
devnn的专栏
05-02 4373
Row和Column是flutter中最基础的容器组件，Row用来水平放置子组件，Column用来垂直放置子组件。它们都可以设置子组件的对齐方式。重点需要了解它们有哪些对齐方式，以及如何对齐的。 布局特点 Row在水平方向会尽可能大，大到会撑满parent；在垂直方向会尽可能小，小到能包裹住children。children在水平默认居左，垂直方向上默认居中。 Column在垂直方向上会尽可能大，...
Flutter——Row&Column
Martin0207的博客
09-27 856
1. 简述 Row和Column分别是横向布局和纵向布局，对标Android中的LinearLayout <!-- Row --> <LinearLayout android:layout_width="match_parent" android:orientation="horizontal" android:...
Flutter：你真的会用 Row、Column 组件吗？
Thatcher Li
04-28 500
Flutter：Row、Column 组件优雅使用指南，回答如何正确的理解并使用他们，解答你心中长久的疑惑，一篇秒懂！
Flutter 布局（七）- Row、Column详解，大厂面试必备技能
2401_84149694的博客
04-08 998
学完之后，若是想验收效果如何，其实最好的方法就是可自己去总结一下。比如我就会在学习完一个东西之后自己去手绘一份xmind文件的知识梳理大纲脑图，这样也可方便后续的复习，且都是自己的理解，相信随便瞟几眼就能迅速过完整个知识，脑补回来。下方即为我手绘的Android框架体系架构知识脑图，由于是xmind文件，不好上传，所以小编将其以图片形式导出来传在此处，细节方面不是特别清晰。但可给感兴趣的朋友提供完整的Android框架体系架构知识脑图原件（包括上方的面试解析xmind文档）
flutter row 滚动_优美的应用体验 来自于细节的处理Flutter跨平台开发滑动折叠头部效果...
weixin_39710251的博客
11-29 164
题记—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力Flutter是谷歌推出的最新的移动开发框架。【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注【x2】各种系列的视频教程 免费开源 关注 你不会迷路【x3】系列文章 百万 Demo 随时 复制粘贴 使用【x4】五分钟视频快速带你浏览构建【x5】一目...
flutter row 滚动_Flutter实战中文原创书籍开源
weixin_39702316的博客
11-27 89
点击上方“躲角落的猫咪”，关注交流7:45 不见不散，真爱，请星标或置顶引语在全球，随着 Flutter 被越来越多的知名公司应用在自己的商业 APP 中，Flutter 这门新技术也逐渐进入了移动开发者的视野，尤其是当 Google 在 2018 年 IO 大会上发布了第一个 Preview 版本后，国内刮起来一股学习 Flutter 的热潮，我认为 Flutter 是以后的一个方向。...
flutter之Row
青年码农
08-15 520
1RowRow是一个用于水平展示多个子控件的控件。row这个控件不会滚动。如果你有一行控件在空间不足的情况下可以滚动，考虑使用ListView类。2构造函数Row({ Key key, MainAxisAlignment mainAxisAlignment, MainAxisSize mainAxisSize, CrossAx...
Flutter: 可滚动列表
学习笔记
08-11 1343
flutter 实现列表滚动： SingleChildScrollView, ListView
flutter之水平布局Row的使用
qq_34497319的博客
08-15 875
Flutter中的row控件就是水平控件，它可以让Row里边的子元素进行水平排列 Row控件可以分为灵活排列和非灵活排列两种 不灵活就是根据Row子元素的大小，进行布局。如果子元素不足，它会留有空隙，如果子元素超出，它会警告。 灵活就是解决上面有空隙的问题，可以使用 Expanded来进行解决。 不灵活水平布局 比如现在我们要制作三个按钮，并让三个按钮同时在一排。我们写下了如下代码，但你会发现效...
Flutter-线性布局（row/column）
创业项目
07-23 1399
线性布局指的是沿水平或者垂直方向排布子组件。flutter中通过row和column来实现线性布局。row和column都继承于flex。 Row({ ... TextDirection textDirection, MainAxisSize mainAxisSize = MainAxisSize.max, MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start, VerticalDirectio
Flutter基础入门与核心组件详解
核心的组件和控件部分，文档详细介绍了`Text`类用于显示文本的使用方法<https://docs.flutter.io/flutter/widgets/Text-class.html>，`Image`类用于加载和显示图像的用法<https://docs.flutter.io/flutter/widgets/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值