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

2024-06-06 18:28
flutter, windows
115人已看

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

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!'),
         ),
       ),
     );
   }
 }

Button（按钮）：
- onPressed: 按钮被点击时触发的回调函数。
- child: 按钮上显示的内容。
- color: 按钮的颜色。
- textColor: 按钮文字的颜色。
```
ElevatedButton(
  onPressed: () {
    // 按钮点击事件
  },
  child: Text('Click Me'),
)
```
TextField（文本输入框）：
- controller: 控制器，用于控制输入框的文本。
- decoration: 输入框的装饰，包括提示文本、边框等。
- onChanged: 文本变化时的回调函数。
- keyboardType: 键盘类型。
```
TextField(
	decoration: InputDecoration(
    	hintText: 'Enter your name',
  	),
  	onChanged: (value) {
    	// 文本变化时的操作
  	},
)
```

Card（卡片）：

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

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

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: () {
          // 第二个菜单项的操作
        },
      ),
    ],
  ),
)

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',
        ),
      ],
    ),
  );
}

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'),
)

ListView（列表视图）：

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

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

PopupMenuButton（弹出菜单按钮）：

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

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

SnackBar（消息提示条）：

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

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

Slider（滑块）：
- value: 滑块的当前值。
- onChanged: 值变化时的回调函数。
- min 和 max: 滑块的最小值和最大值。
```
Slider(
  value: 0.5,
  onChanged: (newValue) {
    // 滑动滑块的操作
  },
  min: 0,
  max: 1,
)
```

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);
        },
      ),
    ],
  ),
)

Switch（开关）：
- value: 开关的当前值。
- onChanged: 值变化时的回调函数。
- activeColor: 开启状态时的颜色。
```
Switch(
  value: true,
  onChanged: (newValue) {
    // 开关状态变化的操作
  },
)
```

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(),
      ],
    ),
  ),
)