【flutter】Row和Column组件

最新推荐文章于 2024-10-20 22:36:21 发布
最新推荐文章于 2024-10-20 22:36:21 发布
阅读量4.6k 收藏 3
点赞数 2
分类专栏： flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devnn/article/details/105887458
版权

Row和Column是flutter中最基础的容器组件，Row用来水平放置子组件，Column用来垂直放置子组件。它们都可以设置子组件的对齐方式。重点需要了解它们有哪些对齐方式，以及如何对齐的。

布局行为

Row默认行为：在水平方向会尽可能大，大到会撑满parent；在垂直方向会尽可能小，小到能包裹住children。children在水平居左，垂直方向上居中。

Column默认行为：在垂直方向上会尽可能大，大到会撑满parent；在水平方向会尽可能小，小到能包裹住children。children在垂直居上，水平方向上居中。

构造函数

Row(
	{Key key,
	MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
	MainAxisSize mainAxisSize: MainAxisSize.max,
	CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
	TextDirection textDirection,
	VerticalDirection verticalDirection: VerticalDirection.down,
	TextBaseline textBaseline,
	List<Widget> children: const []}
)

Column(
	{Key key,
	MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
	MainAxisSize mainAxisSize: MainAxisSize.max,
	CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
	TextDirection textDirection,
	VerticalDirection verticalDirection: VerticalDirection.down,
	TextBaseline textBaseline,
	List<Widget> children: const []}
)

属性

children → List<Widget>

设置子组件，是一个List类型。

mainAxisAlignment → MainAxisAlignment

主轴对齐方式，对于Row是水平方向上对齐方式，对于Column是垂直方向上对齐方式。可以设置成以下值：

  • center → const MainAxisAlignment
    将孩子放置在尽可能靠近主轴中心的位置。
  • end → const MainAxisAlignment
    将孩子放置在尽可能靠近主轴末端的位置。
    如果在水平方向上使用此值，则必须使用TextDirection来确定末端是左侧还是右侧。
    如果在垂直方向上使用此值，则必须使用VerticalDirection来确定末端是顶部还是底部。
  • spaceAround → const MainAxisAlignment
    在孩子之间以及第一个和最后一个孩子之前和之后的一半空间之间均匀地放置可用空间。
  • spaceBetween →const MainAxisAlignment
    将空闲空间均匀地放在孩子之间。
  • spaceEvenly →const MainAxisAlignment
    将空闲空间均匀地放在孩子之间包括第一个和最后一个孩子之前和之后。
  • start → const MainAxisAlignment
    将孩子放置在尽可能靠近主轴起点的位置。
    如果在水平方向上使用此值，则必须使用TextDirection来确定起点是左侧还是右侧。
    如果在垂直方向上使用此值，则VerticalDirection必须可用以确定起点是顶部还是底部。
  • values → const List
    此枚举中的值的常量列表，按其声明顺序。

crossAxisAlignment → CrossAxisAlignment

纵轴对齐方式，对于Row是垂直方向上对齐方式，对于Column是水平方向上对齐方式。可以设置成以下值：

  • baseline → const CrossAxisAlignment
    沿交叉轴放置孩子，使其基线匹配。
    如果主轴是垂直的，则将此值视为开始 （因为基线始终是水平的）。
  • center → const CrossAxisAlignment
    放置孩子，使其中心与十字轴的中心对齐。
    这是默认的横轴对齐方式。
  • end → const CrossAxisAlignment
    将孩子放置在尽可能靠近横轴末端的位置。
    例如，在TextDirection为TextDirection.ltr的列（具有垂直轴的弹性）中 ，这将使子元素的右边缘沿该列的右边缘对齐。
    如果在水平方向上使用此值，则必须使用TextDirection来确定末端是左侧还是右侧。
    如果在垂直方向上使用此值，则必须使用VerticalDirection来确定末端是顶部还是底部。
  • start → const CrossAxisAlignment
    将子项的起始边缘与交叉轴的起始侧对齐。
    例如，在TextDirection为TextDirection.ltr的列（具有垂直轴的弹性）中 ，这会将子元素的左边缘沿该列的左边缘对齐。
    如果在水平方向上使用此值，则必须使用TextDirection来确定起点是左侧还是右侧。
    如果在垂直方向上使用此值，则VerticalDirection必须可用以确定起点是顶部还是底部。
  • stretch → const CrossAxisAlignment
    要求孩子填满交叉轴。
    这导致传递给子代的约束在交叉轴上很紧。
  • values → const List
    此枚举中的值的常量列表，按其声明顺序。

mainAxisSize → MainAxisSize

主轴上应占用多少空间。可以设置成以下值：

  • max →const MainAxisSize
    根据传入的布局约束，最大化主轴上的可用空间。
    如果传入的布局约束的BoxConstraints.maxWidth或BoxConstraints.maxHeight足够小 ，则可能仍然没有可用空间。
    如果传入的布局约束是无限的，则RenderFlex将声明，因为将有无限的剩余可用空间，并且框不能具有无限的大小。
  • min →const MainAxisSize
    根据传入的布局约束，将主轴上的可用空间最小化。
    如果传入的布局约束具有足够大的 BoxConstraints.minWidth或BoxConstraints.minHeight，则可能仍有非零的可用空间量。
    如果传入的布局约束不受限制，并且任何子代具有非零的FlexParentData.flex和FlexFit.tight拟合（如Expanded所应用 ），则RenderFlex将声明，因为将有无限的剩余可用空间，并且无法给出框无限大小。
  • values → const List
    此枚举中的值的常量列表，按其声明顺序。

textDirection → TextDirection

文字流动的方向。
有些语言是从左到右书写的（例如，英语，泰米尔语或中文），而其他语言是从右到左书写的（例如，阿拉姆语，希伯来语或乌尔都语）。有些也以混合方式书写，例如阿拉伯语大多是从右到左书写，而数字则是从左到右书写。
必须将文本方向提供给水平呈现文本或水平放置框的API，以便它们可以确定从哪个方向开始：
从右到左，TextDirection.rtl (right to left)；或从左到右的 TextDirection.ltr (left to right)。

textBaseline → TextBaseline

如果根据项目的基线对齐项目，则使用哪个基线。用于对齐文本的水平线。可以设置成以下值：

  • alphabetic → const TextBaseline
    用于对齐字母字符的字形底部的水平线。
  • ideographic → const TextBaseline
    用于对齐表意字符的水平线。
  • values → const List
    此枚举中的值的常量列表，按其声明顺序。

verticalDirection → VerticalDirection

盒子垂直流动的方向。flex算法（例如Column）使用它来决定绘制框的方向。这也用于消除歧义start和end取值（例如 MainAxisAlignment.start或CrossAxisAlignment.end）。可以设置成以下值：

  • down → const VerticalDirection
    盒子应从顶部开始，并垂直向下堆叠。
    “开始”在顶部，“结束”在底部。
  • up → const VerticalDirection
    盒子应从底部开始，并垂直向上堆叠。
    “开始”在底部，“结束”在顶部。
  • values → const List
    此枚举中的值的常量列表，按其声明顺序。

Row构造函数实现：

  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );

可以看到mainAxisAlignment默认值是：MainAxisAlignment.start，mainAxisSize默认值是：MainAxisSize.max，
crossAxisAlignment默认值是 CrossAxisAlignment.center，verticalDirection默认值是VerticalDirection.down。

下面的示例会验证以上情况。

示例一：不使用Row或column的时候：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Image.asset(
              "graphyics/face.jpg",
              width: 100,
              height: 100,
              fit: BoxFit.cover,
            )))));

运行效果
在这里插入图片描述
如果不明白为什么颜色没有显示，可以看看我的另一篇文章：flutter Container组件

示例二：使用Row后，主轴(水平)方向上默认会撑满父组件空间，children默认居左。

row的column的默认主轴对齐方式是： MainAxisAlignment.start

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(children: <Widget>[
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
            ])))));

运行效果：
在这里插入图片描述

示例三：使用Column后，主轴(垂直)方向上默认会撑满父组件空间，children默认居上。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Column demo")),
        body: Container(
            color: Colors.red,
            child: Column(children: <Widget>[
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
              Image.asset(
                "graphyics/face.jpg",
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ),
            ])))));

运行效果：
在这里插入图片描述

示例四，Row设置主轴居中排列—MainAxisAlignment.center

对于column来说就是垂直居中就不举例了。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
              ],
              mainAxisAlignment: MainAxisAlignment.center,
            )))));

运行效果：
在这里插入图片描述

示例五，Row设置主轴靠右排列—MainAxisAlignment.end

对于column来说就是靠下排列就不举例了。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
              ],
              mainAxisAlignment:MainAxisAlignment.end
            )))));

运行效果：
在这里插入图片描述

示例六，Row设置主轴平均分配空间—MainAxisAlignment.spaceEvenly

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
              ],
              mainAxisAlignment:MainAxisAlignment.spaceEvenly
            )))));

运行效果：
在这里插入图片描述

示例七，Row设置主轴spaceAround—MainAxisAlignment.spaceAround

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
              ],
              mainAxisAlignment:MainAxisAlignment.spaceAround
            )))));

运行效果：
在这里插入图片描述

示例八，Row设置主轴对齐spaceBetween—MainAxisAlignment.spaceBetween

对spaceAround的区别就是左右两边没有边距。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
              ],
              mainAxisAlignment:MainAxisAlignment.spaceBetween
            )))));

运行效果：
在这里插入图片描述

示例九，Row设置主轴size最大—MainAxisSize.max

这是默认值，即撑满parent空间。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
              ],
              mainAxisAlignment:MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
            )))));

运行效果：
在这里插入图片描述

示例十，Row设置主轴size最小—MainAxisSize.min

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
              ],
              mainAxisAlignment:MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
            )))));

运行效果：可以看到红色背景没有了。
在这里插入图片描述

示例十一，Row设置纵轴居中对齐—CrossAxisAlignment.center

接着上一个示例代码，添加一个属性：crossAxisAlignment: CrossAxisAlignment.center 这也是默认值，上面示例中图片都是一样大，下面将第一个图片改成原来的一半大小，再添加一个Text感受一下效果。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "HELLO",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
            )))));

运行效果：
在这里插入图片描述

示例十二，Row设置纵轴居上对齐—CrossAxisAlignment.start

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "HELLO",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
            )))));

运行效果：
在这里插入图片描述

示例十三，Row设置纵轴拉长对齐—CrossAxisAlignment.stretch

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "HELLO",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
            )))));

运行效果：
在这里插入图片描述

可能有人会好奇为什么Text没有拉长呢？我也想知道，如果有人知道可以留言告诉我~

示例十四，给Row设置文字流动方向从右向左— TextDirection.rtl

这样设置后，Text的文字会不会换成从右向左呢？试试。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "HELLO",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              textDirection: TextDirection.rtl,
            )))));

运行效果：
在这里插入图片描述
为什么会是这样的呢？看上去 textDirection 这个属性，并不是设置文字方向，而是子组件的排列方向？
或者给Text直接设置textDirection: TextDirection.rtl会改变文字方向吗？看下面一个示例来验证。

示例十五，给Text设置文字方向从右向左— TextDirection.rtl

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "HELLO",
                  textDirection: TextDirection.rtl,
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              textDirection: TextDirection.rtl,
            )))));

运行效果：
在这里插入图片描述
效果还是一样的，试试换成中文会怎样。
在这里插入图片描述
中文也是一样的。官方说对于少数语言有用，我们换成阿拉姆语试试。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "Mayko hatt?",
                  textDirection: TextDirection.rtl,
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              textDirection: TextDirection.rtl,
            )))));

运行效果：
在这里插入图片描述
换成阿拉姆语后，文字方向从右向左生效了。看来textDirection: TextDirection.rtl仅对少数语言管用。

不知读者是否有一个疑问，上面的代码中Text和Row都设置了textDirection: TextDirection.rtl，究竟是哪个设置生效的呢？
下面将Text的textDirection: TextDirection.rtl删除，看看效果。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "Mayko hatt?",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              textDirection: TextDirection.rtl,
            )))));

运行效果：
在这里插入图片描述
显然textDirection这个属性值并不能传递给子组件。

综合上述textDirection的示例，可以总结如下：

给Text设置textDirection，仅针对少数语言有效。
给Row或Column设置textDirection，是改变子组件的排列顺序。

示例十六，给Row设置verticalDirection: VerticalDirection.up

接着上面的代码，添加属性：verticalDirection: VerticalDirection.up

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "Mayko hatt?",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              verticalDirection: VerticalDirection.up,
            )))));

运行效果：
在这里插入图片描述
似乎没有用。

示例十七，给Row设置verticalDirection: VerticalDirection.down

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Row demo")),
        body: Container(
            color: Colors.red,
            child: Row(
              children: <Widget>[
                Image.asset(
                  "graphyics/face.jpg",
                  width: 50,
                  height: 50,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Image.asset(
                  "graphyics/face.jpg",
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                Text(
                  "Mayko hatt?",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                )
              ],
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              verticalDirection: VerticalDirection.down,
            )))));

运行效果：
在这里插入图片描述
似乎还是没有变化。关于verticalDirection这个属性读者如果有什么见解可以留言讨论。
以上举例基本都是拿Row来举例，Column的属性跟Row是一样的，就不重复举例了。

关于Row和Column的主要作用、属性都已经讲完了，不知道读者有没有领悟？

devnn
关注
专栏目录
Flutter中设置 Column 和 Row 布局组件自适应宽高
HMF的博客
05-20 7656
mainAxisSize: MainAxisSize.min
《Flutter 控件大全》第二十五个：Row和Column
老孟Flutter
04-04 323
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 在Row和Column中有一个非常重要的概念：MainAxisAlignment（主轴）和C...
HarmonyOS线性布局指南：Row和Column的详细使用
星辰探码的博客
08-15 1331
通过这些示例代码，你可以清楚地理解如何在Harmony中使用Row和Column布局来实现各种排列方式和自适应特性。掌握这些布局技巧将帮助你设计出灵活且美观的界面。希望这些示例能为你的开发工作提供有价值的参考。
Flutter 布局（七）- Row、Column详解
weixin_34023982的博客
08-01 563
本文主要介绍Flutter布局中的Row、Column控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。 1. Row A widget that displays its children in a horizontal array. 1.1 简介 在Flutter中非常常见的一个多子节点控件，将children排列成一行。估计是借鉴了Web中Flex布局，所以很多属性和表现，...
Flutter笔记 Column和Row
weixin_30266885的博客
02-27 293
MainAxisSize：　　控制自己的布局方式 　　MainAxisSize.min　　默认值，Column和Row自适应children； 　　MainAxisSize.max　　Column填充父控件竖屏，Row填充父控件横屏；需要搭配MainAxisAlignment使用才有效果； MainAxisAlignment：　　控制子集的对齐方式，Column上...
Flutter之Row/Column用法详解
weixin_34236869的博客
02-18 786
前言 相关文章:Flutter学习目录 github地址:Flutter学习 文章结构 CrossAxisAlignment Propery CrossAxisAlignment.start CrossAxisAlignment.center CrossAxisAlignment.end CrossAxisAlignment.stretch CrossAxisAlignment.basel...
解决flutter的Row和Column组件报overflowed by xx Pixels
m0_37237215的博客
05-25 1862
问题: 如题所述 1,Row报overflowed的解决办法: 直接在要展示内容外包一层Expanded解决 child: Scaffold( body: Row( children: <Widget>[ Expanded( child: _image(),//大图片 ), ], ), ), 2,Column报overflowed的解决
Flutter中Padding、Row 、Column 、Expanded 组件详解
越陌度阡
12-20 1765
1.Paddiing 组件 在 html 中常见的布局标签都可以使用padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属 性，这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。 常见属性： 1. padding：内边距值。值类型EdgeInsets； 2.child：子组件。任意类型； 代码示例： import 'package:flutter/material.dart'; void main(){ runApp(My...
【Flutter】widgets (3) Flutter 组件布局基础 Row、Column、Stack、Positioned、Padding、Margin 组件带示例可线上运行
Code Metaverse
06-05 760
让我们继续学习flutter 组件布局基础，Row 和 Column 组件、Stack 和 Positioned 组件、Padding 和 Margin 组件
Flutter Row
jiahua123_dongzhou的博客
09-03 376
Flutter Row 1 Row Row 是一个可以沿水平方向展示它的子组件的组件。 它还可以灵活布局，如果要让某个子组件填充满剩余剩余空间，请使用 Expanded 组件包裹该组件即可。 Row 组件是不可以滚动的，所以在 Row 组件中一般不会放置过多子组件，如果需要滚动的话应该考虑使用 ListView。 如果需要垂直展示，应该考虑 Column 组件。 如果只有一个子组件的话，应该考虑使用使用 Align 或者 Container 组件来定位这个子组件。 说了这么多，对我来说，Row 就是一个 o
Flutter 基础组件之 Row、Column
热门推荐
禽兽先生不禽兽
12-28 2万+
1 Row Row 是一个可以沿水平方向展示它的子组件的组件。 它还可以灵活布局，如果要让某个子组件填充满剩余剩余空间，请使用 Expanded 组件包裹该组件即可。 Row 组件是不可以滚动的，所以在 Row 组件中一般不会放置过多子组件，如果需要滚动的话应该考虑使用 ListView。 如果需要垂直展示，应该考虑 Column 组件。 如果只有一个子组件的话，应该考虑使用使用 Ali...
Flutter的Row和Column简介
江上清风山间明月的博客
02-14 636
Row：水平布局，在水平方向上排列子widget的列表。Column：垂直布局，在垂直方向上排列子widget的列表。说明：Row和Column是多子节点空间，他们不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。
flutter布局-1-column
liu__520的博客
11-04 1329
目录Column1、mainAxisAlignment：主轴布局方式，column主轴方向是垂直的方向2、crossAxisAlignment: 交叉轴的布局方式，对于column来说就是水平方向的布局方式3、textBaseline：字体的基线（基线这东西一直没搞懂，具体详见下一章Row，效果更明显，垂直方向没啥用，不明显）4、textDirection：文字布局方向5、verticalDire...
无涯教程-Flutter - Row&Column
无涯教程
07-07 927
在前面的部分中，无涯教程学习了如何创建一个简单的Flutter应用程序及其对小部件的基本样式。现在，无涯教程将学习如何在屏幕上的行和列中排列小部件。行(rows)和列(columns)不是单个窗口小部件；它们是两个不同的小部件，分别是行和列。在这里，无涯教程将把这两个小部件集成在一起，因为它们具有相似的属性，可帮助无涯教程高效，快速地理解它们。
【Flutter】页面布局：线性布局（Row 和 Column）
最新发布
2303_80346267的博客
10-20 998
在 Flutter 中，布局（Layout）是应用开发的核心之一。通过布局组件，开发者可以定义应用中的控件如何在屏幕上排列。`Row` 和 `Column` 是 Flutter 中最常用的两种线性布局方式，用于水平和垂直排列子组件。在本教程中，我们将详细介绍这两个布局组件的用法，并通过实例帮助理解如何使用它们来构建灵活、响应式的用户界面。
HarmonyOS--ArkUI组件--容器组件Column和Row
github_39096247的博客
09-08 3035
容器组件Column和Row
Flutter 中的 Row 小部件：全面指南
smileKH的博客
05-12 954
Row是 Flutter 中处理水平布局的核心小部件，它提供了丰富的对齐和间距选项，使得在 Flutter 应用中实现各种水平布局变得简单而高效。掌握Row的使用，可以帮助你创建出既美观又实用的布局界面。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值