当前位置： 首页 > article >正文

【Flutter】页面布局：线性布局（Row 和 Column）

article 2024/10/21 6:27:18

在 Flutter 中，布局（Layout）是应用开发的核心之一。通过布局组件，开发者可以定义应用中的控件如何在屏幕上排列。Row 和 Column 是 Flutter 中最常用的两种线性布局方式，用于水平和垂直排列子组件。在本教程中，我们将详细介绍这两个布局组件的用法，并通过实例帮助理解如何使用它们来构建灵活、响应式的用户界面。

线性布局简介

线性布局是指组件按一定方向依次排列，方向可以是水平（Row）或者垂直（Column）。在 Flutter 中，Row 用于水平排列，Column 用于垂直排列。它们都可以包含多个子组件，按照一定规则依次布局。

Row 和 Column 的基本属性：

  • children: 这是它们最主要的属性，用于指定要排列的子组件，通常是一个 Widget 的列表（List<Widget>）。
  • mainAxisAlignment: 控制主轴（Row 的主轴是水平轴，Column 的主轴是垂直轴）上的对齐方式。
  • crossAxisAlignment: 控制交叉轴（Row 的交叉轴是垂直轴，Column 的交叉轴是水平轴）上的对齐方式。
  • mainAxisSize: 决定主轴的尺寸大小，是占满可用空间还是仅包裹内容。

Row：水平布局

Row 是一个水平方向的布局组件，它允许子组件在水平轴上依次排列。通过 Row，你可以很容易地实现按钮栏、图标栏等常见的水平布局场景。

Row 基本示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Row 示例')),
        body: Row(
          children: <Widget>[
            Icon(Icons.home, size: 40, color: Colors.blue),
            Icon(Icons.favorite, size: 40, color: Colors.red),
            Icon(Icons.settings, size: 40, color: Colors.green),
          ],
        ),
      ),
    );
  }
}

在这个例子中，Row 组件水平排列了三个图标。Row 中的 children 属性是一个 List<Widget>，每个子组件会按顺序从左到右进行排列。

Row 主要属性详解

  1. mainAxisAlignment
    控制子组件在主轴（水平方向）上的对齐方式。mainAxisAlignment 提供了几种常用的对齐方式：

    • MainAxisAlignment.start: 子组件从主轴起始位置排列（默认）。
    • MainAxisAlignment.end: 子组件从主轴结束位置排列。
    • MainAxisAlignment.center: 子组件在主轴上居中排列。
    • MainAxisAlignment.spaceBetween: 子组件在主轴上平均分布，首尾组件紧贴两端，中间均匀间隔。
    • MainAxisAlignment.spaceAround: 子组件在主轴上均匀分布，每个组件两侧有相同的间距。
    • MainAxisAlignment.spaceEvenly: 子组件均匀分布，子组件之间以及两端的间距都相同。

    示例：

    Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.home, size: 40),
    Icon(Icons.favorite, size: 40),
    Icon(Icons.settings, size: 40),
  ],
)

  2. crossAxisAlignment
    控制子组件在交叉轴（垂直方向）上的对齐方式：

    • CrossAxisAlignment.start: 子组件在交叉轴起始位置对齐。
    • CrossAxisAlignment.end: 子组件在交叉轴结束位置对齐。
    • CrossAxisAlignment.center: 子组件在交叉轴上居中对齐（默认）。
    • CrossAxisAlignment.stretch: 拉伸子组件以占满交叉轴。

    示例：

    Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.home, size: 40),
    Icon(Icons.favorite, size: 60),
    Icon(Icons.settings, size: 40),
  ],
)

  3. mainAxisSize
    控制 Row 在主轴方向的尺寸大小，默认是 MainAxisSize.max，即尽可能占用主轴的全部空间。如果只想让 Row 根据子组件的宽度进行调整，可以设置为 MainAxisSize.min。

    示例：

    Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Icon(Icons.home, size: 40),
    Icon(Icons.favorite, size: 40),
    Icon(Icons.settings, size: 40),
  ],
)

Column：垂直布局

与 Row 类似，Column 用于将子组件按垂直方向排列。它适用于需要将多个组件上下堆叠的场景，例如表单、列表项等。

Column 基本示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Column 示例')),
        body: Column(
          children: <Widget>[
            Text('Flutter', style: TextStyle(fontSize: 24)),
            Icon(Icons.favorite, size: 50, color: Colors.red),
            Text('Dart', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}

在此示例中，Column 将三个子组件按垂直方向依次排列。与 Row 类似，Column 也有一些控制排列和对齐的属性。

Column 主要属性详解

  1. mainAxisAlignment
    控制子组件在主轴（垂直方向）上的对齐方式，属性和 Row 中的 mainAxisAlignment 用法相同。

    示例：

    Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Text('上方文本', style: TextStyle(fontSize: 24)),
    Icon(Icons.favorite, size: 50),
    Text('下方文本', style: TextStyle(fontSize: 24)),
  ],
)

  2. crossAxisAlignment
    控制子组件在交叉轴（水平方向）上的对齐方式，属性与 Row 中的 crossAxisAlignment 类似。

    示例：

    Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('文本1', style: TextStyle(fontSize: 24)),
    Text('文本2', style: TextStyle(fontSize: 24)),
  ],
)

  3. mainAxisSize
    控制 Column 在主轴方向的尺寸大小，默认是 MainAxisSize.max，即尽可能占用垂直方向的全部空间。如果只想让 Column 根据子组件的高度进行调整，可以设置为 MainAxisSize.min。

    示例：

    Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('文本1', style: TextStyle(fontSize: 24)),
    Text('文本2', style: TextStyle(fontSize: 24)),
  ],
)

使用 Expanded 调整布局

Expanded 是一个非常实用的组件，它可以让某个子组件在主轴方向上占据尽可能多的空间。在 Row 和 Column 布局中，使用 Expanded 可以灵活调整子组件的大小和占比。

示例：使用 Expanded

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        height: 50,
      ),
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 50,
    ),
  ],
)

在这个示例中，Expanded 让第一个子组件（红色容器）在 Row 的水平方向上占据尽可能多的空间，而第二个子组件（绿色容器）固定宽度为 100 像素。

Row 和 Column 组合使用

在实际开发中，你经常需要将 `

Row和Column组合使用来创建复杂的布局结构。通过将Row和Column` 嵌套在一起，可以轻松构建出网格布局、表单布局等复杂界面。

示例：嵌套使用 Row 和 Column

Column(
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Icon(Icons.home, size: 40),
        Icon(Icons.favorite, size: 40),
        Icon(Icons.settings, size: 40),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Text('Home'),
        Text('Favorite'),
        Text('Settings'),
      ],
    ),
  ],
)

这个示例展示了如何将 Row 和 Column 组合使用，一个 Row 中放置了图标，另一个 Row 中放置了对应的文本。

总结

Row 和 Column 是 Flutter 中最基础、最常用的布局组件，它们分别用于水平和垂直排列子组件。通过合理地使用这些线性布局组件，并结合属性如 mainAxisAlignment、crossAxisAlignment 和 Expanded，开发者可以轻松构建出灵活、响应式的用户界面。

掌握 Row 和 Column 的使用技巧，是 Flutter 布局系统中非常重要的一部分。在后续的开发中，随着需求的复杂化，线性布局通常会与其他布局组件如 Stack、Flex 等组合使用，构建出更加复杂的界面。


http://www.kler.cn/news/358349.html

相关文章：

  • mybatis针对枚举的处理的总结
  • 《Vue3 版本差异》Vue3.5+ 在组件或HTML元素绑定 ref 差异
  • （RAG 系列）重排序模型部署以及接入 fastgpt 平台
  • 【Flutter】页面布局：弹性布局（Flex）
  • Linux下的进程解析（level 2）
  • C++核心编程和桌面应用开发 第十二天（输入输出流 流对象 写文件 读文件）
  • 鸿蒙应用开发----西西购物商城（一）
  • G-Set（增长集合，Grow-Only Set）
  • 面试题：在 React 中如何绑定事件
  • 从 Microsoft 官网下载 Windows 10
  • Linux命令进阶·vi\vim编辑器详细命令介绍
  • vulnhub靶场之digitalworld.local: MERCY v2
  • maven多模块聚合打包父pom version占位符总无法install问题解决
  • 【C语言教程】【常用类库】（十六）正则表达式库 - ＜regex.h＞
  • 七、朴素贝叶斯算法
  • Git核心概念图例与最常用内容操作(reset、diff、restore、stash、reflog、cherry-pick)
  • Web前端-JavaScript书写位置
  • 实验4：IPSec VPN(课内实验)
  • 微服务发布
  • K8S中的pod和node的区别