Flutter 学习笔记：构建用户界面的艺术

见解分享

2023-09-15 11:52:46

在踏入 Flutter 世界的第二章中，我们将深入探究布局和页面组件，掌握构建优雅而响应式界面的精髓。

布局的基础

Flutter 中的布局建立在灵活且强大的约束系统之上。该系统允许您控制小部件如何响应屏幕大小、用户交互和设备方向。核心布局小部件包括：

Row ：按水平排列子控件。
Column ：按垂直排列子控件。
Stack ：按层级排列子控件，相互重叠。
Positioned ：使用绝对定位放置子控件。

页面组件

Flutter 提供了一系列预构建的组件，用于创建丰富的页面布局：

Scaffold ：应用页面的基础结构，包括 AppBar、Body 和 FloatingActionButton。
AppBar ：页面顶部的工具栏，包含标题、导航按钮和操作。
TabBar ：用于在页面之间切换的选项卡栏。
Drawer ：从屏幕边缘滑出的侧边栏，用于导航和设置。
BottomNavigationBar ：页面底部的导航栏，包含标签和图标。

实战：构建一个简单的布局

让我们通过构建一个简单的布局来巩固这些概念：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Layout')),
      body: Center(
        child: Column(
          children: [
            Text('Header'),
            Text('Body'),
            Text('Footer'),
          ],
        ),
      ),
    );
  }
}