二十八、Material和Cupertino组件

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

1.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: () {
        // 打开设置页面
      },
    ),
  ],)

了解更多：AppBar组件文档open in new window

2） FloatingActionButton组件

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

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

FloatingActionButton(
  onPressed: () {
    // 执行操作
  },
  child: Icon(Icons.add),)

了解更多：FloatingActionButton组件文档open in new window

3） Card组件

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

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

Card(
  child: Column(
    children: [
      Image.network('https://example.com/image.jpg'),
      ListTile(
        title: Text('Title'),
        subtitle: Text('Description'),
      ),
    ],
  ),)

了解更多：Card组件文档open in new window

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

带你读《深入浅出Dart》二十八、Material和Cupertino组件（2）https://developer.aliyun.com/article/1348597?groupCode=tech_library