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

在这里插入图片描述

文章目录

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

布局与 UI 组件

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

核心组件

3.1 基础布局

Row：水平排列子组件。

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

Column：垂直排列子组件。

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

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

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

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

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

3.2 滚动布局

ListView：垂直滚动的列表。

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：网格布局。

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 使用。

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

3.3 容器类

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

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

Padding：设置内边距。

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

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

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

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

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

必须掌握

3.4 响应式设计

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

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

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

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

3.5 自适应布局

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

示例：响应式布局

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();
            }
          },
        ),
      ),
    );
  }
}