一周掌握Flutter开发--3、布局与 UI 组件

文章目录

- - [布局与 UI 组件](#布局与 UI 组件)
  - 核心组件
  - - [3.1 基础布局](#3.1 基础布局)
    - [3.2 滚动布局](#3.2 滚动布局)
    - [3.3 容器类](#3.3 容器类)
  - 必须掌握
  - - [3.4 响应式设计](#3.4 响应式设计)
    - [3.5 自适应布局](#3.5 自适应布局)
  - 总结

布局与 UI 组件

Flutter 的布局系统非常灵活，通过组合不同的 Widget 来构建复杂的 UI。掌握核心布局组件和设计原则是开发高效、美观应用的关键。

核心组件

3.1 基础布局

Row：水平排列子组件。

dart 复制代码

Row(
  children: [
    Text('Left'),
    Spacer(), // 占据剩余空间
    Text('Right'),
  ],
);

Column：垂直排列子组件。

dart 复制代码

Column(
  children: [
    Text('Top'),
    Expanded(child: Container(color: Colors.red)), // 占据剩余空间
    Text('Bottom'),
  ],
);

Stack：将子组件叠加在一起。

dart 复制代码

Stack(
  children: [
    Container(color: Colors.blue),
    Positioned(
      top: 10,
      left: 10,
      child: Text('Overlay'),
    ),
  ],
);

Flex ：灵活布局，Row 和 Column 的底层实现。

dart 复制代码

Flex(
  direction: Axis.horizontal, // 水平排列
  children: [
    Expanded(flex: 1, child: Container(color: Colors.red)),
    Expanded(flex: 2, child: Container(color: Colors.blue)),
  ],
);

3.2 滚动布局

ListView：垂直滚动的列表。

dart 复制代码

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
);

// 动态列表
ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
);

GridView：网格布局。

dart 复制代码

GridView.count(
  crossAxisCount: 2, // 每行显示2个
  children: List.generate(10, (index) => Container(color: Colors.blue)),
);

// 动态网格
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: 10,
  itemBuilder: (context, index) => Container(color: Colors.blue),
);

CustomScrollView ：自定义滚动布局，结合 Slivers 使用。

dart 复制代码

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Sliver AppBar'),
      expandedHeight: 200,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 20,
      ),
    ),
  ],
);

3.3 容器类

Container：多功能容器，可以设置尺寸、边距、背景色等。

dart 复制代码

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  margin: EdgeInsets.all(10),
  child: Text('Hello'),
);

Padding：设置内边距。

dart 复制代码

Padding(
  padding: EdgeInsets.all(10),
  child: Text('Padded Text'),
);

Expanded ：在 Row 或 Column 中占据剩余空间。

dart 复制代码

Row(
  children: [
    Expanded(
      flex: 2, // 占据2份空间
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1, // 占据1份空间
      child: Container(color: Colors.green),
    ),
  ],
);

SizedBox：设置固定尺寸或占位。

dart 复制代码

SizedBox(
  width: 100,
  height: 100,
  child: Text('Fixed Size'),
);

必须掌握

3.4 响应式设计

MediaQuery：获取屏幕尺寸和设备信息。

dart 复制代码

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

LayoutBuilder：根据父组件尺寸动态调整布局。

dart 复制代码

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return WideLayout();
    } else {
      return NarrowLayout();
    }
  },
);

3.5 自适应布局

处理不同屏幕尺寸：
- 使用 MediaQuery 和 LayoutBuilder 动态调整布局。
- 使用 Flexible 和 Expanded 实现弹性布局。
- 使用 AspectRatio 保持宽高比。
  dart 复制代码
```
AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(color: Colors.blue),
);
```

示例：响应式布局

dart 复制代码

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth > 600) {
              return WideLayout();
            } else {
              return NarrowLayout();
            }
          },
        ),
      ),
    );
  }
}

总结

基础布局 ：掌握 Row、Column、Stack、Flex。
滚动布局 ：掌握 ListView、GridView、CustomScrollView。
容器类 ：掌握 Container、Padding、Expanded、SizedBox。
响应式设计 ：使用 MediaQuery 和 LayoutBuilder 实现动态布局。
自适应布局：处理不同屏幕尺寸，确保 UI 在各种设备上表现一致。

掌握这些布局与 UI 组件的使用技巧后，你可以轻松构建复杂且美观的 Flutter 应用界面。

结束语

Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！