Flutter线性布局 #

一、Row #

1.1 基本用法 #

Row是水平方向的线性布局容器。

dart

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>[],
})

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

1.2 mainAxisAlignment #

主轴对齐方式（水平方向）：

dart

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [...],
)

MainAxisAlignment.start
MainAxisAlignment.end
MainAxisAlignment.center
MainAxisAlignment.spaceBetween
MainAxisAlignment.spaceAround
MainAxisAlignment.spaceEvenly

1.3 crossAxisAlignment #

交叉轴对齐方式（垂直方向）：

dart

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 100, color: Colors.green),
    Container(width: 50, height: 75, color: Colors.blue),
  ],
)

CrossAxisAlignment.start
CrossAxisAlignment.end
CrossAxisAlignment.center
CrossAxisAlignment.stretch
CrossAxisAlignment.baseline

1.4 mainAxisSize #

主轴尺寸：

dart

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

MainAxisSize.max
MainAxisSize.min

1.5 完整示例 #

dart

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 100, color: Colors.green),
    Container(width: 50, height: 75, color: Colors.blue),
  ],
)

二、Column #

2.1 基本用法 #

Column是垂直方向的线性布局容器。

dart

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 <Widget>[],
})

Column(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

2.2 mainAxisAlignment #

主轴对齐方式（垂直方向）：

dart

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [...],
)

2.3 crossAxisAlignment #

交叉轴对齐方式（水平方向）：

dart

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(height: 50, color: Colors.red),
    Container(height: 50, color: Colors.green),
    Container(height: 50, color: Colors.blue),
  ],
)

2.4 完整示例 #

dart

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title', style: TextStyle(fontSize: 24)),
    SizedBox(height: 8),
    Text('Subtitle', style: TextStyle(fontSize: 16)),
    SizedBox(height: 16),
    Row(
      children: [
        Icon(Icons.star, color: Colors.amber),
        SizedBox(width: 4),
        Text('4.5'),
      ],
    ),
  ],
)

三、嵌套布局 #

3.1 Row嵌套Column #

dart

Row(
  children: [
    Column(
      children: [
        Icon(Icons.home),
        Text('Home'),
      ],
    ),
    SizedBox(width: 16),
    Column(
      children: [
        Icon(Icons.search),
        Text('Search'),
      ],
    ),
    SizedBox(width: 16),
    Column(
      children: [
        Icon(Icons.person),
        Text('Profile'),
      ],
    ),
  ],
)

3.2 Column嵌套Row #

dart

Column(
  children: [
    Row(
      children: [
        Expanded(child: Container(height: 100, color: Colors.red)),
        Expanded(child: Container(height: 100, color: Colors.green)),
      ],
    ),
    Row(
      children: [
        Expanded(child: Container(height: 100, color: Colors.blue)),
        Expanded(child: Container(height: 100, color: Colors.yellow)),
      ],
    ),
  ],
)

四、Expanded #

4.1 基本用法 #

Expanded用于填充剩余空间。

dart

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Expanded(
      child: Container(height: 50, color: Colors.green),
    ),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

4.2 flex属性 #

dart

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(height: 50, color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(height: 50, color: Colors.green),
    ),
    Expanded(
      flex: 1,
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)

4.3 常见布局 #

dart

Column(
  children: [
    Container(
      height: 100,
      color: Colors.blue,
      child: Center(child: Text('Header')),
    ),
    Expanded(
      child: Container(
        color: Colors.grey.shade200,
        child: Center(child: Text('Content')),
      ),
    ),
    Container(
      height: 60,
      color: Colors.blue,
      child: Center(child: Text('Footer')),
    ),
  ],
)

五、Flexible #

5.1 基本用法 #

Flexible与Expanded类似，但可以不填满空间。

dart

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(height: 50, color: Colors.red),
    ),
    Flexible(
      flex: 2,
      child: Container(height: 50, color: Colors.green),
    ),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

5.2 fit属性 #

dart

Flexible({
  Key? key,
  int flex = 1,
  FlexFit fit = FlexFit.loose,
  Widget? child,
})

FlexFit.tight
FlexFit.loose

dart

Row(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: Container(height: 50, color: Colors.red),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(width: 50, height: 50, color: Colors.green),
    ),
  ],
)

5.3 Expanded vs Flexible #

dart

Row(
  children: [
    Expanded(
      child: Container(height: 50, color: Colors.red),
    ),
    Flexible(
      child: Container(width: 50, height: 50, color: Colors.green),
    ),
  ],
)

六、IntrinsicHeight & IntrinsicWidth #

6.1 IntrinsicHeight #

dart

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Container(width: 50, height: 100, color: Colors.red),
      Container(width: 50, height: 50, color: Colors.green),
      Container(width: 50, height: 75, color: Colors.blue),
    ],
  ),
)

6.2 IntrinsicWidth #

dart

IntrinsicWidth(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Container(height: 50, color: Colors.red),
      Container(height: 50, color: Colors.green),
      Container(height: 50, color: Colors.blue),
    ],
  ),
)

七、溢出处理 #

7.1 溢出警告 #

dart

Row(
  children: [
    Text('This is a very long text that will overflow'),
    Text('Another text'),
  ],
)

7.2 使用Flexible解决 #

dart

Row(
  children: [
    Flexible(
      child: Text(
        'This is a very long text that will overflow',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text('Another text'),
  ],
)

7.3 使用Expanded #

dart

Row(
  children: [
    Expanded(
      child: Text(
        'This is a very long text that will overflow',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text('Another text'),
  ],
)

八、实战示例 #

8.1 列表项 #

dart

Container(
  padding: EdgeInsets.all(16),
  child: Row(
    children: [
      CircleAvatar(
        backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
      ),
      SizedBox(width: 12),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'John Doe',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Text(
              'Software Engineer',
              style: TextStyle(color: Colors.grey),
            ),
          ],
        ),
      ),
      Icon(Icons.more_vert),
    ],
  ),
)

8.2 卡片布局 #

dart

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(Icons.article, color: Colors.blue),
            SizedBox(width: 8),
            Expanded(
              child: Text(
                'Article Title',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
        SizedBox(height: 8),
        Text(
          'Article description goes here...',
          style: TextStyle(color: Colors.grey.shade600),
        ),
        SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                Icon(Icons.thumb_up, size: 16),
                SizedBox(width: 4),
                Text('128'),
              ],
            ),
            Row(
              children: [
                Icon(Icons.comment, size: 16),
                SizedBox(width: 4),
                Text('32'),
              ],
            ),
            Icon(Icons.share, size: 16),
          ],
        ),
      ],
    ),
  ),
)

九、总结 #

9.1 核心属性 #

属性	说明
mainAxisAlignment	主轴对齐
crossAxisAlignment	交叉轴对齐
mainAxisSize	主轴尺寸
Expanded	填充剩余空间
Flexible	弹性布局

9.2 下一步 #

掌握了线性布局后，让我们学习弹性布局！