Flutter布局

Flutter 布局的核心机制是 widget。在 Flutter 中，几乎所有东西都是 widget —— 甚至布局模型都是 widget。你在 Flutter 应用程序中看到的图像，图标和文本都是 widget。此外不能直接看到的也是 widget，例如用来排列、限制和对齐可见 widget 的行、列和网格。

你可以通过组合 widgets 来构建更复杂的 widgets 来创建布局。

基于 Material 的应用

对于 Material app，你可以使用 Scaffold widget，它提供默认的 banner 背景颜色，还有用于添加抽屉、提示条和底部列表弹窗的 API。你可以将 Center widget 直接添加到主页 body 的属性中。

dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const String appTitle = 'Flutter layout demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

info提示

Material 库实现了一些遵循 Material Design 原则的 widgets。在设计 UI 时，你可以只使用标准 widgets 库中的 widgets，也可以使用 Material library 中的 widgets。你可以混合来自两个库的 widgets，可以自定义现有 widgets，也可以构建自己的一组自定义 widgets。

基于 Cupertino 的应用

你可以使用 CupertionApp 和 CupertinoPageScaffold widget 来创建一个基于 Cupertino 的应用。

与 Material 不同的是它并没有自带横幅和背景颜色。你需要手动设置它们。

你可以通过 theme 属性设置配置好的 CupertinoThemeData 来更改默认颜色。
你可以通过 navigationBar 属性设置 CupertinoNavigationBar 来展示 iOS 风格的导航栏。同时你还可以利用 CupertinoColors 来为 widget 配置与 iOS 设计风格相符的颜色。
你可以设置脚手架 (CupertinoScaffold) 的 child 属性来构建你的主体内容，例如 Center 或者 Column。

若你想了解更多可以添加的 UI 组件，参阅 Cupertino 库文档。

dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Flutter layout demo',
      theme: CupertinoThemeData(
        brightness: Brightness.light,
        primaryColor: CupertinoColors.systemBlue,
      ),
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          backgroundColor: CupertinoColors.systemGrey,
          middle: Text('Flutter layout demo'),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello World'),
            ],
          ),
        ),
      ),
    );
  }
}

info提示

Cupertino 库实现了 Apple 的人机界面指南。你可以利用基础 [widget 库] 和 Cupertino 库，把它们加入你的界面设计中。无论是混合这些库、自定义已有的 widget，还是构建你自己的一套 widget，都不失为一种选择。

基本布局

布局Widget	描述
`Container`	一个通用的容器，可以包含子widget并添加填充、边距、边框和背景色等属性。
`Row`	在水平轴上排列子widget。
`Column`	在垂直轴上排列子widget。
`Stack`	允许子widget相互堆叠，后添加的子widget会覆盖先前的子widget。
`ListView`	可滚动的线性排列widget，用于显示长列表。
`GridView`	可滚动的二维网格排列widget。
`Flex`	类似于 `Row`和 `Column`，可以在水平或垂直方向上灵活排列子widget。
`Expanded`	用于扩展子widget以填充父布局中的可用空间。
`SizedBox`	一个具有特定宽度和高度的widget，通常用于在布局中创建空白空间。
`Padding`	在子widget周围添加填充。
`Align`	将子widget对齐到特定位置。
`Center`	将子widget居中对齐。
`FittedBox`	缩放并调整子widget的大小以适应父容器。
`FractionallySizedBox`	根据父容器的百分比调整子widget的大小。
`Wrap`	当空间不足时会自动换行的布局，适合显示动态数量的子widget。
`Positioned`	用于在 `Stack`中的特定位置放置子widget。
`Table`	用于创建表格布局，允许按行和列排列子widget。
`Spacer`	用于在 `Row`或 `Column`中创建可调整大小的空白空间。
`AspectRatio`	根据特定的宽高比调整子widget的大小。
`Baseline`	根据子widget的文本基线对齐其位置。

Flutter布局

基于 Material 的应用​

基于 Cupertino 的应用​

基本布局​

基于 Material 的应用

基于 Cupertino 的应用

基本布局