Flutter 常用的 Material 组件及其相关属性

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 {
      @override
      Widget 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(),
          ],
        ),
      ),
    )