【flutter】column和row组件

column 组件的使用

column组件可以有多个孩子。

SafeArea

SafeArea 为安全区，为了确保内容不会出现在顶部的状态栏中。

mainAxisSize

一列垂直方向为主轴，这里把主轴的长度限制到最小，即三个盒子加在一起的高度。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
            child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.white,
              child: Text('容器1'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.amber,
              child: Text('容器2'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.brown,
              child: Text('容器3'),
            ),
          ],
        )),
      ),
    );
  }
}

VerticalDirection

有两个属性down和up, up是从下往上，down是从上面的正常位置开始

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
            child: Column(
          verticalDirection: VerticalDirection.up,
          //mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.white,
              child: Text('容器1'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.amber,
              child: Text('容器2'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.brown,
              child: Text('容器3'),
            ),
          ],
        )),
      ),
    );
  }
}

MainAxisAlignment

设置主轴的开始位置，alignment是对准的意思，
start表示从最上面开始，center从中间开始，end从最下面开始

不想让三个孩子堆叠在一起，spaceEvenly可以让三个孩子均匀的分布在主轴上
spaceBetween可以让一个孩子在开头，另外一个在末尾

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.white,
              child: Text('容器1'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.amber,
              child: Text('容器2'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.brown,
              child: Text('容器3'),
            ),
          ],
        )),
      ),
    );
  }
}

crossAxisAlignment

环绕轴，方向为水平方向。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.white,
              child: Text('容器1'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.amber,
              child: Text('容器2'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.brown,
              child: Text('容器3'),
            ),
            Container(
              width: double.infinity,
              height: 10,
              color: Colors.black26,
            )
          ],
        )),
      ),
    );
  }
}

stretch表示拉升，把所有元素的宽度延长到无限。
SizedBox为了给盒子中间填充一个高度。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              height: 100,
              color: Colors.white,
              child: Text('容器1'),
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              height: 100,
              color: Colors.amber,
              child: Text('容器2'),
            ),
            Container(
              height: 100,
              color: Colors.brown,
              child: Text('容器3'),
            ),
          ],
        )),
      ),
    );
  }
}