Flutter 基础布局之Row

这篇具有很好参考价值的文章主要介绍了Flutter 基础布局之Row。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Row意为水平布局,可以使其包含的子控件按照水平方向排列

代码如下:

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.lightGreen,
          child: Row(
            children: [
              Container(
                width: 100,
                height: 120,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                width: 100,
                height: 180,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果如下:

Flutter 基础布局之Row

如上图所示,我们可以看到三个控件水平的排列在屏幕中间

----------------分割线---------------

这种基本的使用大多数情况都不能满足需求,让我们来看下Row拥有的几个参数


Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  })

MainAxisAlignment:主轴对齐方式,就是Row中子控件在水平方向的对齐方式(PS:对于Row来说主轴就是水平方向,而对于Column来说主轴就是垂直方向)

mainAxisAlignment有以下几个可选值

MainAxisAlignment.start:靠左排列(从Row的结构体可以看出这是默认的值)

MainAxisAlignment.end:靠右排列。代码如下:

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.lightGreen,
          child: Row(
            mainAxisAlignment:MainAxisAlignment.end,
            children: [
              Container(
                width: 100,
                height: 120,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                width: 100,
                height: 180,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果如下:

Flutter 基础布局之Row

MainAxisAlignment.center:居中排列。

代码与上面差不多,就不贴了。效果如下:

Flutter 基础布局之Row

MainAxisAlignment.spaceAround:每个子组件左右间隔相等,也就是 margin 相等。效果如下:

Flutter 基础布局之Row

MainAxisAlignment.spaceBetween:两端对齐,也就是第一个子组件靠左,最后一个子组件靠右,剩余组件在中间平均分散排列。效果如下:

Flutter 基础布局之Row

MainAxisAlignment.spaceEvenly:每个子组件平均分散排列,也就是均分水平空间。效果如下:

Flutter 基础布局之Row

CrossAxisAlignment:交叉轴对齐方式,就是Row中子控件在垂直方向的对齐方式,所谓的交叉轴就是与主轴垂直的方向(PS:对于Row来说,它的交叉轴就是垂直方向,对于Column来说,它的交叉轴就是水平方向)

crossAxisAlignment有以下几个可选值

CrossAxisAlignment.center:子组件在 Row 中居中对齐(从Row的结构体可以看出这是默认的值),所以图一里子控件会在垂直方向居中。

CrossAxisAlignment.start:子组件在 Row 顶部对齐,效果如下

Flutter 基础布局之Row

CrossAxisAlignment.end:子组件在 Row 底部对齐。

Flutter 基础布局之Row

CrossAxisAlignment.stretch:交叉轴拉伸填充满父布局。

效果如下:

Flutter 基础布局之Row

CrossAxisAlignment.baseline:基于基线对齐,不常用,意义不明...

MainAxisSize:主轴大小适配,有两个值可选

MainAxisSize.min:宽度与子控件保持一致

代码如下

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          alignment: Alignment.center,
          color: Colors.lightGreen,
          child: Container(
            color: Colors.blueGrey,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 100,
                  height: 120,
                  color: Colors.red,
                ),
                Container(
                  width: 100,
                  height: 150,
                  color: Colors.yellow,
                ),
                Container(
                  width: 100,
                  height: 180,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

效果如下:

Flutter 基础布局之Row

MainAxisSize.max:宽度铺满主轴方向(这个是默认值)

效果如下:

Flutter 基础布局之Row

TextDirection:子组件水平方向排列顺序(PS:从上面可以看出,我们Row里的子控件默认是从左往右排序的,如果设置了这个参数,则可以改变默认的排序方向)

可选值有:

 --TextDirection.ltr:从左往右开始排列(这个是默认的方向)

 --TextDirection.rtl:从右往左开始排列

代码如下:

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.lightGreen,
          child: Row(
            textDirection: TextDirection.rtl,
            children: [
              Container(
                width: 100,
                height: 120,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                width: 100,
                height: 180,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

效果如下:

Flutter 基础布局之Row

从上图我们看到,原本我们代码里排在第一个红色控件,此时排在了右边第一个

VerticalDirection:子组件垂直方向排列顺序,这个不关Row的事,我们将会在Column里介绍这个属性..

介绍完毕~

 文章来源地址https://www.toymoban.com/news/detail-410120.html

到了这里,关于Flutter 基础布局之Row的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • qt界面布局之水平布局与垂直布局(QHBoxLayout, QVBoxLayout)

    QHBoxLayout 提供了一些方法,下面简单介绍一下常用方法 QVBoxLayout与QHBoxLayout使用类似,这里就不贴QVBoxLayout的代码了 void addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = Qt::Alignment()); 第一个参数可以传入一个QWidget的派生类指针类型(可以理解是待加入的控件地址) 第二个参数传

    2024年02月09日
    浏览(49)
  • Qt中的垂直布局QVBoxLayout和水平布局QHBoxLayout

    Qt中的垂直布局(Vertical Layout)是用来将控件按垂直方向进行排列的布局管理器。下面是一些常用的Qt Vertical Layout的函数及其用法示例: QVBoxLayout类的构造函数: 使用QVBoxLayout类的构造函数创建一个垂直布局对象。 QVBoxLayout类的addSpacing()函数:

    2024年02月11日
    浏览(36)
  • 【CSS 布局】水平垂直方向居中

    单行元素 方式一: relative 和 absolute 方式二: relative 和 absolute (变种,适合于宽高固定) 方式三: flex 和 margin 方式四: flex 方式五: flex 多行元素

    2024年02月13日
    浏览(43)
  • Android studio下的线性布局(LinearLayout)与水平布局(ReativeLayout)详细解析+典型例子及其代码

    一:线性布局 线性布局有水平线性布局: android :orientation =\\\"horizontal\\\" ; 和垂直线性布局: android :orientation =\\\"vertical\\\" 两种布局。 当代码表示 android :orientation =\\\"horizontal\\\" 时, 表示这个布局下的所有子元素都要水平方向排列。 当代码表示 android :orientation =\\\"verticall\\\" 时, 表示这个布

    2024年02月09日
    浏览(49)
  • 微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中

    类似这样写法 display:  flex; flex-direction:  column;                //垂直布局 align-items:  center;                    // 水平居中     justify-content:  space-around; //垂直方向分散布局 类似这样写法 display:  flex; flex-direction: row;          //水平布局       align-items: center;    

    2024年02月03日
    浏览(46)
  • 微信小程序布局图片上面显示文字以及文字水平垂直居中

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月14日
    浏览(51)
  • 微信小程序-flex布局:垂直、水平方向-自动填充满剩余空间

    在微信小程序项目中经常需要将水平或垂直方向分成两大部分,一部分内容宽度或高度固定,剩余的一部分需填充满剩余空间。那么,该怎么快速解决这类布局? 效果图如下: 垂直方向 : 水平方向: 我个人比较喜欢使用flex布局,面对此类布局,最先想到的也是flex布局。常

    2024年02月09日
    浏览(52)
  • flutter在windows系统上实现左右水平滑动问题

    在个问题在github也有记录:https://github.com/flutter/flutter/issues/105095 就是flutter使用listview等可以滑动的组件来左右滚动的时候,不能正常工作,也就是无效,所以下面大家开始讨论这个问题。 翻阅大家讨论的内容,发现有的windows11是可以正常工作的,但是需要加上一个滚动条和

    2024年01月21日
    浏览(34)
  • JAVA 学到什么水平就可以转战 Android 了?

    先简单的分两种情况: 一、 有编程基础,或者科班出身的,直接上吧 。 强烈推荐郭霖老师的《第一行代码-Android》 二、没编程基础的,先入门java,如果天天都有比较多的空闲时间的话,这个入门时间要在2周完成,如果没有的话,1个月内完成吧, 不要让拖延耽搁你的激情

    2024年03月26日
    浏览(45)
  • Flutter 笔记 | Flutter 布局组件

    布局类组件都会包含一个或多个子组件,布局类组件都是直接或间接继承 SingleChildRenderObjectWidget 和 MultiChildRenderObjectWidget 的Widget,它们一般都会有一个 child 或 children 属性用于接收子 Widget。 不同的布局类组件对子组件排列(layout)方式不同,如下表所示: Widget 说明 用途

    2024年02月06日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包