《深入浅出Dart》Flutter之Material和Cupertino组件_flutter material

作者：天景科技苑 | 2024-08-01 10:45:27

踩

flutter material

Material和Cupertino组件

在本篇文章中，我们将使用官方最新的Dart语法和新知识，详细介绍Flutter中的Material Design和Cupertino风格组件。Flutter提供了两种主题风格，分别是Material Design和Cupertino，用于创建漂亮、一致的用户界面。我们将深入探讨这两种风格的组件，并提供官方文档链接，以便你进一步学习。

Flutter Material Design组件

Material Design是一种现代化、美观的设计风格，由Google提出，用于创建一致的用户界面。Flutter提供了许多Material Design风格的组件，用于构建漂亮、具有响应性的应用程序。

以下是一些常用的Flutter Material Design组件：

1. AppBar组件

AppBar是Material Design风格的应用栏，通常位于页面的顶部，用于显示标题、操作按钮等。

以下是一个简单的AppBar示例：

AppBar(
  title: Text('My App'),
  actions: [
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        // 打开设置页面
      },
    ),
  ],
)
1
2
3
4
5
6
7
8
9
10
11

了解更多：AppBar组件文档

2. FloatingActionButton组件

FloatingActionButton是一个浮动的圆形按钮，常用于触发应用程序中的主要操作。

以下是一个简单的FloatingActionButton示例：

FloatingActionButton(
  onPressed: () {
    // 执行操作
  },
  child: Icon(Icons.add),
)
1
2
3
4
5
6

了解更多：FloatingActionButton组件文档

3. Card组件

Card是一种具有阴影效果的卡片式容器，常用于显示相关的内容，如图片、标题和描述。

以下是一个简单的Card示例：

Card(
  child: Column(
    children: [
      Image.network('https://example.com/image.jpg'),
      ListTile(
        title: Text('Title'),
        subtitle: Text('Description'),
      ),
    ],
  ),
)
1
2
3
4
5
6
7
8
9
10
11

了解更多：[Card组件文档](https://api.flutter.dev

/flutter/material/Card-class.html)

以上只是一些常用的Material Design组件示例，Flutter提供了更多丰富的组件和功能，你可以根据需要选择适当的组件来构建漂亮的用户界面。

Flutter Cupertino风格组件

Cupertino是iOS风格的设计语言，Flutter提供了一系列的Cupertino风格组件，使得应用程序可以在iOS设备上具有原生的外观和行为。

以下是一些常用的Flutter Cupertino风格组件：

1. CupertinoNavigationBar组件

CupertinoNavigationBar是Cupertino风格的导航栏，通常位于页面的顶部，用于显示标题、操作按钮等。

以下是一个简单的CupertinoNavigationBar示例：

CupertinoNavigationBar(
  middle: Text('My App'),
  trailing: CupertinoButton(
    child: Icon(CupertinoIcons.settings),
    onPressed: () {
      // 打开设置页面
    },
  ),
)
1
2
3
4
5
6
7
8
9

了解更多：CupertinoNavigationBar组件文档

2. CupertinoButton组件

CupertinoButton是Cupertino风格的按钮，具有iOS风格的外观和触摸反馈。

以下是一个简单的CupertinoButton示例：

CupertinoButton(
  onPressed: () {
    // 执行操作
  },
  child: Text('Click Me'),
)
1
2
3
4
5
6

了解更多：CupertinoButton组件文档

3. CupertinoAlertDialog组件

CupertinoAlertDialog是Cupertino风格的对话框，用于显示警告、确认或其他相关信息。

以下是一个简单的CupertinoAlertDialog示例：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return CupertinoAlertDialog(
      title: Text('Alert'),
      content: Text('This is an alert dialog.'),
      actions: [
        CupertinoDialogAction(
          child: Text('OK'),
          onPressed: () {
            // 处理按钮点击事件
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18