Flutter常用Widgets介绍

发布时间: 2025-03-22 21:57

↑

# Flutter常用Widgets介绍

## 什么是Widget？

Widget是Flutter中构建UI的基本单位。在Flutter中，一切都是Widget，从一个简单的按钮到整个应用程序都是Widget。Widget可以描述：

- 一个UI元素（如按钮或文本）
- 一个布局元素（如居中或行布局）
- 一个交互元素（如手势检测器）
- 一个应用程序主题

## 基础Widgets

### Text Widget

用于显示文本的基础组件：

```dart
Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
)
```

主要属性：
- `style`：文本样式（字体、大小、颜色等）
- `textAlign`：文本对齐方式
- `overflow`：文本溢出处理方式
- `maxLines`：最大行数

### Image Widget

用于显示图片的组件，支持多种来源：

```dart
// 从网络加载图片
Image.network(
  'https://example.com/image.jpg',
  width: 200.0,
  height: 200.0,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, progress) {
    return progress == null ? child : CircularProgressIndicator();
  },
)

// 从本地资源加载图片
Image.asset(
  'assets/images/logo.png',
  width: 100.0,
  height: 100.0,
)
```

主要属性：
- `width`/`height`：图片尺寸
- `fit`：图片填充模式
- `loadingBuilder`：加载过程处理

### Button Widgets

Flutter提供多种按钮组件：

```dart
// 文本按钮
TextButton(
  onPressed: () {
    print('Text button pressed');
  },
  child: Text('Text Button'),
)

// 凸起按钮
ElevatedButton(
  onPressed: () {
    print('Elevated button pressed');
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
  ),
  child: Text('Elevated Button'),
)

// 轮廓按钮
OutlinedButton(
  onPressed: () {
    print('Outlined button pressed');
  },
  child: Text('Outlined Button'),
)
```

### Icon Widget

用于显示图标的组件：

```dart
Icon(
  Icons.star,
  color: Colors.yellow,
  size: 24.0,
)

// 带按钮的图标
IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  onPressed: () {
    print('Icon button pressed');
  },
)
```

## 输入Widgets

### TextField

文本输入框组件：

```dart
TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('输入的内容：$value');
  },
  controller: TextEditingController(),
  keyboardType: TextInputType.text,
)
```

主要属性：
- `decoration`：输入框装饰（标签、提示、图标等）
- `onChanged`：输入变化回调
- `controller`：输入控制器
- `keyboardType`：键盘类型

### Checkbox和Radio

选择组件：

```dart
// 复选框
Checkbox(
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value!;
    });
  },
)

// 单选框
Radio<int>(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? value) {
    setState(() {
      selectedValue = value!;
    });
  },
)
```

### Switch

开关组件：

```dart
Switch(
  value: isSwitched,
  onChanged: (value) {
    setState(() {
      isSwitched = value;
    });
  },
  activeColor: Colors.blue,
)
```

## 列表Widgets

### ListView

可滚动列表组件：

```dart
// 基础列表
ListView(
  children: [
    ListTile(
      leading: Icon(Icons.map),
      title: Text('地图'),
      subtitle: Text('查看地图详情'),
      trailing: Icon(Icons.arrow_forward_ios),
      onTap: () {
        print('点击了地图项');
      },
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('相册'),
      subtitle: Text('查看照片'),
      trailing: Icon(Icons.arrow_forward_ios),
    ),
  ],
)

// 构建器列表
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)
```

### GridView

网格布局组件：

```dart
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
    childAspectRatio: 1.0,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Card(
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)
```

## 容器Widgets

### Container

最常用的容器组件：

```dart
Container(
  width: 200.0,
  height: 200.0,
  margin: EdgeInsets.all(10.0),
  padding: EdgeInsets.all(15.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Text('Container示例'),
)
```

### Card

卡片式容器：

```dart
Card(
  elevation: 5.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Column(
      children: [
        Image.asset('assets/image.jpg'),
        SizedBox(height: 10.0),
        Text('卡片标题'),
        Text('卡片描述'),
      ],
    ),
  ),
)
```

## 对话框Widgets

### AlertDialog

警告对话框：

```dart
showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('提示'),
      content: Text('确定要删除吗？'),
      actions: [
        TextButton(
          child: Text('取消'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('确定'),
          onPressed: () {
            // 执行删除操作
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
)
```

### BottomSheet

底部弹出菜单：

```dart
showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200.0,
      child: Column(
        children: [
          ListTile(
            leading: Icon(Icons.photo_camera),
            title: Text('拍照'),
            onTap: () {
              // 处理拍照
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.photo_library),
            title: Text('从相册选择'),
            onTap: () {
              // 处理相册选择
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  },
)
```

## 实用技巧

### Widget组合

在实际开发中，我们经常需要组合多个Widget来创建复杂的UI：

```dart
Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            CircleAvatar(
              backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
            ),
            SizedBox(width: 10.0),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '用户名',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text('副标题'),
              ],
            ),
          ],
        ),
        SizedBox(height: 10.0),
        Text('这是一段详细的描述文本...'),
        SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.thumb_up),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.comment),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.share),
              onPressed: () {},
            ),
          ],
        ),
      ],
    ),
  ),
)
```

### 自定义Widget

当需要复用某个UI组件时，可以创建自定义Widget：

```dart
class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color color;

const CustomButton({
    Key? key,
    required this.text,
    required this.onPressed,
    this.color = Colors.blue,
  }) : super(key: key);

@override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        primary: color,
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
      child: Text(
        text,
        style: TextStyle(fontSize: 16),
      ),
    );
  }
}

// 使用自定义Widget
CustomButton(
  text: '点击我',
  onPressed: () {
    print('按钮被点击');
  },
  color: Colors.green,
)
```

## 最佳实践

1. **Widget选择**
   - 选择最适合需求的Widget
   - 避免过度使用复杂Widget
   - 注意性能影响

2. **代码组织**
   - 将复杂UI拆分成小的Widget
   - 使用命名规范和注释
   - 保持代码整洁和可维护

3. **性能优化**
   - 使用const构造函数
   - 适当使用StatelessWidget
   - 避免不必要的重建

4. **响应式设计**
   - 使用灵活的布局
   - 考虑不同屏幕尺寸
   - 适配横竖屏切换

## 总结

Flutter提供了丰富的内置Widgets，通过合理组合和使用这些Widgets，我们可以构建出优秀的用户界面。在实际开发中，需要：

1. 熟悉常用Widgets的特性和用法
2. 学会组合Widgets创建复杂UI
3. 掌握自定义Widget的方法
4. 注意性能优化和最佳实践

随着对Flutter的深入学习，你会发现这些基础Widgets是构建任何复杂UI的基石。通过不断实践和积累经验，你将能够更好地运用这些组件，创建出优秀的Flutter应用。

元素码农