flutter appbar
时间: 2023-09-14 14:11:38 浏览: 145
Flutter中的AppBar是一个Material Design风格的导航栏,通常用于顶部App的标题、菜单项、搜索框等。以下是一个简单的AppBar示例:
```dart
import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget with PreferredSizeWidget {
@override
Widget build(BuildContext context) {
return AppBar(
title: Text('My App'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
),
],
);
}
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
}
```
在这个示例中,我们创建了一个名为`MyAppBar`的无状态小部件,并使用`AppBar`小部件定义了一个具有标题和两个操作按钮的AppBar。`preferredSize`方法用于指定AppBar的首选大小。在Scaffold中使用此小部件:
```dart
Scaffold(
appBar: MyAppBar(),
body: Center(
child: Text('Hello World!'),
),
);
```
这将在Scaffold中显示一个具有标题和两个操作按钮的AppBar。
阅读全文