Flutter中的Row和Column组件

发布于1/29/2020 来自：「前端知否」微信公众号

Row

Row是用于以水平方式显示子组件。Row组件不会滚动。如果您有一行组件，并希望它们在空间不足时能够滚动，请考虑使用ListView。

如果我们希望在一行中显示三个文本组件，我们可以创建一个Row，如下所示：

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Container(
      color: Colors.blue,
      child: Row(
        textDirection: TextDirection.ltr,
        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),
          )
        ],
      ),
    )
  )
);

xxx

Column

Column组件用于垂直显示子组件。Column组件不会滚动。如果您有一行组件，并希望它们在空间不足时能够滚动，请考虑使用ListView。

如果我们希望在一个列中显示三个文本组件，我们可以创建一个如下所示的列组件：

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Container(
      color: Colors.blue,
      child: Column(
        textDirection: TextDirection.ltr,
        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),
          )
        ],
      ),
    )
  )
);

xxx

Column和Row具有相同的属性。因此，在下面的示例中，我们同时使用这两个组件。

什么是行和列中的CrossAxis(交叉轴)？

xxx

CrossAxisAlignment属性

我们可以使用crossAxisAlignment属性在所需方向上对齐子组件，例如，crossAxisAlignment.start会将子项的起始边缘与十字轴的起始侧对齐。

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Container(
      color: Colors.blue,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        textDirection: TextDirection.ltr,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.pink,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.purple,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.greenAccent,
            textDirection: TextDirection.ltr,
          ),
          Container(
            color: Colors.orange,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.cyan,
            textDirection: TextDirection.ltr,
          ),
        ],
      ),
    )
  )
);

xxx

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Container(
      color: Colors.blue,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        textDirection: TextDirection.ltr,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.pink,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.purple,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.greenAccent,
            textDirection: TextDirection.ltr,
          ),
          Container(
            color: Colors.orange,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.cyan,
            textDirection: TextDirection.ltr,
          ),
        ],
      ),
    )
  )
);

xxx

CrossAxisAlignment.center

放置子组件，使其中心与十字轴的中心对齐。

xxx

CrossAxisAlignment.end

将子组件放置在尽可能靠近横轴末端的位置。

xxx

CrossAxisAlignment.baseline

沿交叉轴放置子组件，使其基线匹配对齐。

您应该将TextBaseline Class与CrossAxisAlignment.baseline一起使用。

import 'package:flutter/material.dart';

void main() => runApp(
  Container(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Text(
         'Flutter',
          style: TextStyle(color: Colors.yellow, fontSize: 30.0),
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Flutter',
          style: TextStyle(color: Colors.blue, fontSize: 20.0),
          textDirection: TextDirection.ltr,
        ),
      ],
    ),
  )
);

xxx

import 'package:flutter/material.dart';

void main() => runApp(
  Container(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Text(
         'Flutter',
          style: TextStyle(color: Colors.yellow, fontSize: 30.0),
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Flutter',
          style: TextStyle(color: Colors.blue, fontSize: 20.0),
          textDirection: TextDirection.ltr,
        ),
      ],
    ),
  )
);

xxx

TextDirection属性

确定水平放置子组件的顺序以及水平方向的开始和结束的位置。

import 'package:flutter/material.dart';

void main() => runApp(
  Container(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      textDirection: TextDirection.rtl,
      children: <Widget>[
        Text(
         'Flutter',
          style: TextStyle(color: Colors.yellow, fontSize: 30.0),
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Flutter',
          style: TextStyle(color: Colors.blue, fontSize: 20.0),
          textDirection: TextDirection.ltr,
        ),
      ],
    ),
  )
);

xxx

import 'package:flutter/material.dart';

void main() => runApp(
  Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      textDirection: TextDirection.rtl,
      children: <Widget>[
        Text(
         'Flutter',
          style: TextStyle(color: Colors.yellow, fontSize: 30.0),
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Flutter',
          style: TextStyle(color: Colors.blue, fontSize: 20.0),
          textDirection: TextDirection.ltr,
        ),
      ],
    ),
  )
);

xxx

VerticalDirection属性

确定垂直放置子组件的顺序以及垂直方向的开始和结束位置。

默认为VerticalDirection.down。

import 'package:flutter/material.dart';

void main() => runApp(
  Container(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      verticalDirection: VerticalDirection.down,
      textDirection: TextDirection.rtl,
      children: <Widget>[
        Text(
         'Flutter',
          style: TextStyle(color: Colors.yellow, fontSize: 30.0),
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Flutter',
          style: TextStyle(color: Colors.blue, fontSize: 20.0),
          textDirection: TextDirection.ltr,
        ),
      ],
    ),
  )
);

xxx

import 'package:flutter/material.dart';

void main() => runApp(
  Container(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      verticalDirection: VerticalDirection.up,
      textDirection: TextDirection.rtl,
      children: <Widget>[
        Text(
         'Flutter',
          style: TextStyle(color: Colors.yellow, fontSize: 30.0),
          textDirection: TextDirection.ltr,
        ),
        Text(
          'Flutter',
          style: TextStyle(color: Colors.blue, fontSize: 20.0),
          textDirection: TextDirection.ltr,
        ),
      ],
    ),
  )
);

xxx

主轴在行和列中是什么？

xxx

MainAxisAlignment属性

设置子组件在主轴上的位置。

MainAxisAlignment.start

将子组件放置在尽可能靠近主轴起点的位置。

xxx

MainAxisAlignment.center

将子组件放置在尽可能靠近主轴中心的位置。

xxx

MainAxisAlignment.end

将子组件放置在尽可能靠近主轴末端的位置。

xxx

MainAxisAlignment.spaceAround

将自由空间均匀地放在子组件之间，以及第一个子组件和最后一个子组件前后各占一半间隔空间。

xxx

MainAxisAlignment.spaceBetween

将空闲空间均匀地放在子组件之间。

xxx

MainAxisAlignment.spaceEvenly

将空闲空间均匀地放在子组件之间以及第一个子组件之前和最后一个子组件之后。

xxx

MainAxisSize属性

设置主轴上组件的大小。

MainAxisSize.max

根据传入的布局约束，最大化主轴上的可用空间。

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Container(
      color: Colors.grey,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        textDirection: TextDirection.rtl,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.pink,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.purple,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.greenAccent,
            textDirection: TextDirection.ltr,
          ),
          Container(
            color: Colors.orange,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.cyan,
            textDirection: TextDirection.ltr,
          ),
        ],
      ),
    ),
  )
);

xxx

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Container(
      color: Colors.grey,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        textDirection: TextDirection.rtl,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.pink,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.purple,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.greenAccent,
            textDirection: TextDirection.ltr,
          ),
          Container(
            color: Colors.orange,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.cyan,
            textDirection: TextDirection.ltr,
          ),
        ],
      ),
    ),
  )
);

xxx

MainAxisSize.min

根据传入的布局约束，将主轴上的可用空间最小化。

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Container(
      color: Colors.grey,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        textDirection: TextDirection.rtl,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.pink,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.purple,
            textDirection: TextDirection.ltr,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.greenAccent,
            textDirection: TextDirection.ltr,
          ),
          Container(
            color: Colors.orange,
            width: 50.0,
            height: 50.0,
          ),
          Icon(
            Icons.adjust,
            size: 50.0,
            color: Colors.cyan,
            textDirection: TextDirection.ltr,
          ),
        ],
      ),
    ),
  )
);

xxx

最后

篇幅有限，希望大家能够有所收获！

Flutter中的容器组件
Flutter获取json数据
Copyright ©2019-2020 宅码，豫ICP备19043034号-1