Flutter——最详细的Row(横向)布局使用教程_flutter 横向布局

Row简介
横向排列内部布局，可容纳多个组件。

• 创建一个横向排列的布局

import 'package:flutter/material.dart';
class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      color: Colors.yellow,
      child: Row(
       mainAxisAlignment: MainAxisAlignment.start, ///主轴
        crossAxisAlignment: CrossAxisAlignment.end,///横轴
        children: [
          Container(
            width: 100,
            color: Colors.red,
            child: Text('left'),
          ),
          Container(
            width: 100,
            color: Colors.green,
            child: Text('center'),
          ),
          Container(
            width: 100,
            color: Colors.blueAccent,
            child: Text('right'),
          ),
        ],
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

属性：mainAxisAlignment: MainAxisAlignment.start

属性：mainAxisAlignment: MainAxisAlignment.center

属性：mainAxisAlignment: MainAxisAlignment.end

属性：mainAxisAlignment: MainAxisAlignment.spaceBetween

属性：mainAxisAlignment: MainAxisAlignment.spaceAround

属性：mainAxisAlignment: MainAxisAlignment.spaceEvenly

属性：crossAxisAlignment: CrossAxisAlignment.end

属性：crossAxisAlignment: CrossAxisAlignment.start

属性：crossAxisAlignment: CrossAxisAlignment.center

属性：crossAxisAlignment: CrossAxisAlignment.stretch