组件详解 - Flutter

01. Material Design 组件

Flutter 提供丰富的 Material Design 组件，遵循 Google 的设计规范。常用组件： - AppBar：应用栏 - Scaffold：页面骨架 - ListTile：列表项 - Card：卡片 - FloatingActionButton：浮动按钮 - Drawer：侧边栏 - BottomNavigationBar：底部导航

dart

import 'package:flutter/material.dart';

class MaterialWidgets extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Material 组件'),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('菜单'),
          decoration: BoxDecoration(color: Colors.blue),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('首页'),
          onTap: () {},
        ),
      ],
    ),
  ),
  body: ListView(
    children: [
      Card(
        child: Column(
          children: [
            Image.network('https://picsum.photos/400/200'),
            Padding(
              padding: EdgeInsets.all(16),
              child: ListTile(
                leading: CircleAvatar(child: Text('张')),
                title: Text('卡片标题'),
                subtitle: Text('卡片描述内容'),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);
}
}

02. Cupertino 组件

Cupertino 组件遵循 iOS 设计规范，提供原生 iOS 风格的 UI。常用组件： - CupertinoNavigationBar：iOS 风格导航栏 - CupertinoListSection：分组列表 - CupertinoSwitch：开关 - CupertinoSlider：滑块 - CupertinoActionSheet：操作表 - CupertinoAlertDialog：对话框

dart

import 'package:flutter/cupertino.dart';

class CupertinoWidgets extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text('Cupertino 组件'),
    trailing: CupertinoButton(
      child: Icon(CupertinoIcons.add),
      onPressed: () {},
    ),
  ),
  child: ListView(
    children: [
      CupertinoListSection(
        header: Text('设置'),
        children: [
          CupertinoListTile(
            leading: Icon(CupertinoIcons.wifi),
            title: Text('Wi-Fi'),
            trailing: CupertinoSwitch(value: true, onChanged: (v) {}),
          ),
          CupertinoListTile(
            leading: Icon(CupertinoIcons.bluetooth),
            title: Text('蓝牙'),
            trailing: CupertinoSwitch(value: false, onChanged: (v) {}),
          ),
        ],
      ),
      CupertinoListSection(
        header: Text('音量'),
        children: [
          CupertinoSlider(
            value: 0.6,
            onChanged: (v) {},
          ),
        ],
      ),
    ],
  ),
);
}
}

03. 自定义组件

创建可复用的自定义组件是 Flutter 开发的最佳实践。组件设计原则： - 单一职责：每个组件只做一件事 - 可配置：通过参数定制外观 - 可组合：组合现有组件构建复杂 UI

dart

import 'package:flutter/material.dart';

// 自定义按钮组件
class CustomButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
final Color? color;
final IconData? icon;

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

@override
Widget build(BuildContext context) {
return ElevatedButton.icon(
  onPressed: onPressed,
  icon: Icon(icon, size: 20),
  label: Text(text),
  style: ElevatedButton.styleFrom(
    backgroundColor: color,
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
);
}
}

// 自定义卡片组件
class UserCard extends StatelessWidget {
final String name;
final String email;
final String avatarUrl;
final VoidCallback? onTap;

const UserCard({
Key? key,
required this.name,
required this.email,
required this.avatarUrl,
this.onTap,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Card(
  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: InkWell(
    onTap: onTap,
    borderRadius: BorderRadius.circular(12),
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          CircleAvatar(
            radius: 30,
            backgroundImage: NetworkImage(avatarUrl),
          ),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  name,
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 4),
                Text(
                  email,
                  style: TextStyle(color: Colors.grey),
                ),
              ],
            ),
          ),
          Icon(Icons.chevron_right),
        ],
      ),
    ),
  ),
);
}
}

知识测验

第 1/5 题正确 0

Material Design 和 Cupertino 的区别是什么？

状态管理