Flutter 中的 Material 组件库提供了一系列用于构建漂亮的 Material Design 风格用户界面的组件。下面是一些常用的 Material 组件及其相关属性的介绍：

1. AppBar（应用栏）：

   • title: 应用栏的标题。
   • actions: 应用栏的操作按钮。
   • backgroundColor: 背景颜色。
   • elevation: 阴影的高度。
   • bottom: 应用栏底部的控件。

    import 'package:flutter/material.dart';void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('My App'),actions: <Widget>[IconButton(icon: Icon(Icons.search),onPressed: () {// 执行搜索操作},),IconButton(icon: Icon(Icons.settings),onPressed: () {// 打开设置页面},),],),body: Center(child: Text('Hello, World!'),),),);}}
   

2. Button（按钮）：

   • onPressed: 按钮被点击时触发的回调函数。
   • child: 按钮上显示的内容。
   • color: 按钮的颜色。
   • textColor: 按钮文字的颜色。

   ElevatedButton(onPressed: () {// 按钮点击事件},child: Text('Click Me'),
   )
   

3. TextField（文本输入框）：

   • controller: 控制器，用于控制输入框的文本。
   • decoration: 输入框的装饰，包括提示文本、边框等。
   • onChanged: 文本变化时的回调函数。
   • keyboardType: 键盘类型。

   TextField(decoration: InputDecoration(hintText: 'Enter your name',),onChanged: (value) {// 文本变化时的操作},
   )
   

4. Card（卡片）：

   • child: 卡片中的内容组件。
   • elevation: 阴影的高度。
   • shape: 卡片的形状。

   Card(elevation: 4,child: ListTile(leading: Icon(Icons.album),title: Text('Title'),subtitle: Text('Subtitle'),onTap: () {// 点击卡片的操作},),
   )
   

5. Drawer（抽屉菜单）：

   • child: 抽屉中的内容组件。
   • elevation: 阴影的高度。

   Drawer(child: ListView(padding: EdgeInsets.zero,children: <Widget>[DrawerHeader(child: Text('Drawer Header'),decoration: BoxDecoration(color: Colors.blue,),),ListTile(title: Text('Item 1'),onTap: () {// 第一个菜单项的操作},),ListTile(title: Text('Item 2'),onTap: () {// 第二个菜单项的操作},),],),
   )
   

6. BottomNavigationBar（底部导航栏）：

   • items: 导航栏的条目。
   • currentIndex: 当前选中的条目索引。
   • onTap: 点击条目时触发的回调函数。

   int _selectedIndex = 0;@override
   Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('BottomNavigationBar Demo'),),body: Center(child: Text('Index $_selectedIndex'),),bottomNavigationBar: BottomNavigationBar(currentIndex: _selectedIndex,onTap: (index) {setState(() {_selectedIndex = index;});},items: [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.search),label: 'Search',),BottomNavigationBarItem(icon: Icon(Icons.person),label: 'Profile',),],),);
   }
   

7. AlertDialog（警告对话框）：

   • title: 对话框的标题。
   • content: 对话框的内容。
   • actions: 对话框的操作按钮。

   ElevatedButton(onPressed: () {showDialog(context: context,builder: (context) => AlertDialog(title: Text('Alert'),content: Text('This is an alert dialog.'),actions: <Widget>[TextButton(child: Text('OK'),onPressed: () {Navigator.pop(context);},),],),);},child: Text('Show Alert'),
   )
   

8. ListView（列表视图）：

   • children: 列表中的子组件列表。
   • itemBuilder: 用于动态构建列表项的函数。
   • scrollDirection: 滚动方向。
   • separatorBuilder: 列表项之间的分隔符构建器。

   ListView.builder(itemCount: 10,itemBuilder: (context, index) {return ListTile(title: Text('Item $index'),onTap: () {// 点击列表项的操作},);},
   )
   

9. PopupMenuButton（弹出菜单按钮）：

   • itemBuilder: 弹出菜单项的构建器。
   • onSelected: 菜单项被选中时的回调函数。

   PopupMenuButton<String>(itemBuilder: (context) => [PopupMenuItem(value: 'item1',child: Text('Item 1'),),PopupMenuItem(value: 'item2',child: Text('Item 2'),),],onSelected: (value) {// 选择菜单项的操作},
   )
   

10. SnackBar（消息提示条）：

    • content: 提示条中显示的内容。
    • action: 可选操作按钮。
    • duration: 显示时间。

    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Hello, Snackbar!'),action: SnackBarAction(label: 'Undo',onPressed: () {// 撤销操作},),),
    )
    

11. Slider（滑块）：

    • value: 滑块的当前值。
    • onChanged: 值变化时的回调函数。
    • min 和 max: 滑块的最小值和最大值。

    Slider(value: 0.5,onChanged: (newValue) {// 滑动滑块的操作},min: 0,max: 1,
    )
    

12. Dialog（对话框）：

    • child: 对话框的内容组件。
    • backgroundColor: 对话框的背景颜色。
    • elevation: 对话框的阴影高度。

    showDialog(context: context,builder: (context) => AlertDialog(title: Text('Alert'),content: Text('This is an alert dialog.'),actions: <Widget>[TextButton(child: Text('OK'),onPressed: () {Navigator.pop(context);},),],),
    )
    

13. Switch（开关）：

    • value: 开关的当前值。
    • onChanged: 值变化时的回调函数。
    • activeColor: 开启状态时的颜色。

    Switch(value: true,onChanged: (newValue) {// 开关状态变化的操作},
    )
    

14. TabBar（选项卡栏）：

    • tabs: 选项卡的列表。
    • controller: 用于控制选项卡的控制器。
    • indicatorColor: 选项卡指示器的颜色。

    DefaultTabController(length: 2,child: Scaffold(appBar: AppBar(bottom: TabBar(tabs: [Tab(text: 'Tab 1'),Tab(text: 'Tab 2'),],),),body: TabBarView(children: [// 第一个选项卡的内容Container(),// 第二个选项卡的内容Container(),],),),
    )