代码人生|Flutter UI 组件基础

一、基础 UI 组件介绍

1. 文本组件（Text）

用于显示文字，支持字体样式（颜色、大小、字重等）。


dart
 代码解读
复制代码
Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

关键属性：style 可设置 TextStyle，支持字体、颜色、阴影等。

2. 按钮组件（ElevatedButton/TextButton/IconButton）

ElevatedButton：带背景色的凸起按钮。
TextButton：扁平化文本按钮。


dart
 代码解读
复制代码
ElevatedButton(
  onPressed: () {},
  child: Text('点击我'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 20),
  ),
)

搭配使用：按钮常与布局组件（如 Row）结合，实现多按钮排列。

3. 图片组件（Image）

支持加载网络、本地资源图片：


dart
 代码解读
复制代码
Image.network('https://example.com/image.jpg')
Image.asset('assets/image.png')

样式定制：通过 fit 控制填充方式（如 BoxFit.cover）。

4. 输入框（TextField）

支持文本输入与样式控制：


dart
 代码解读
复制代码
TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    border: OutlineInputBorder(),
    hintText: '请输入',
  ),
)

进阶功能：表单验证、焦点控制等。

二、布局组件与搭配使用

1. 行与列（Row/Column）

Row：水平排列子组件，通过 mainAxisAlignment 控制对齐方式。
Column：垂直排列子组件。


dart
 代码解读
复制代码
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [Text('左'), Text('右')],
)

嵌套使用：Row 内可嵌套 Column 实现复杂布局。

2. 层叠布局（Stack）

用于绝对定位，结合 Positioned 控制子组件位置：


dart
 代码解读
复制代码
Stack(
  children: [
    Container(color: Colors.red),
    Positioned(
      top: 10,
      left: 10,
      child: Icon(Icons.star),
    ),
  ],
)

典型场景：悬浮按钮、重叠图片。

3. 列表（ListView）

支持滚动列表，分短列表（ListView）和长列表（ListView.builder）：


dart
 代码解读
复制代码
ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

进阶功能：下拉刷新（RefreshIndicator）、上拉加载（ScrollController）。

三、样式定制与组件组合

1. 容器样式（Container）

通过 decoration 属性定制背景、边框、阴影等：


dart
 代码解读
复制代码
Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [BoxShadow(blurRadius: 5)],
  ),
  child: Text('带阴影的容器'),
)

细节控制：border 设置边框，gradient 实现渐变。

2. 自定义绘制（CustomPaint）

通过 CustomPainter 实现复杂图形：


dart
 代码解读
复制代码
CustomPaint(
  painter: MyPainter(),
  size: Size(200, 200),
)
class MyPainter extends CustomPainter {
  void paint(Canvas canvas, Size size) {
    // 绘制逻辑
  }
}

应用场景：图表、自定义图标。

3. 主题化按钮与卡片

组合 Card、ListTile 实现 Material 风格卡片：


dart
 代码解读
复制代码
Card(
  elevation: 5,
  child: ListTile(
    leading: Icon(Icons.person),
    title: Text('用户信息'),
  ),
)

四、全局样式设置

1. 通过 ThemeData 统一风格

在 MaterialApp 中定义全局颜色、字体：


dart
 代码解读
复制代码
MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
  ),
)

调用方式：Theme.of(context).primaryColor。

2. 自定义样式类

创建独立类管理全局颜色和字体：


dart
 代码解读
复制代码
class AppStyles {
  static const Color primary = Color(0xFF2196F3);
  static const TextStyle title = TextStyle(fontSize: 20);
}
// 使用
Text('标题', style: AppStyles.title)

优势：避免与 Material 默认样式冲突。

3. 响应式字体与屏幕适配

使用 flutter_screenutil 插件实现自适应布局：


dart
 代码解读
复制代码
ScreenUtil.init(context, designSize: Size(750, 1334));
Text('自适应文字', style: TextStyle(fontSize: 32.sp))

关键点：需在页面初始化时调用 ScreenUtil.init()。

五、进阶技巧与资源

动画与过渡效果
- 使用 AnimatedContainer 实现平滑过渡。
- Hero 组件实现页面间共享元素动画。
第三方组件库
- UFluxKit：提供 260+ 预置组件（如电商、社交界面模板）。
- flutter_spinkit：丰富的加载动画。
性能优化
- 长列表使用 ListView.builder 避免内存溢出。
- 复杂界面拆分组件，减少重建范围。