Flutter Widget -AppBar
作者:互联网
Flutter Widgets
Flutter 2.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 60bd88df91 (10 weeks ago) • 2021-03-03 09:13:17 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0
文章目录
1.材料设计根控件 MaterialApp
2.页面基础布局 Scaffold
3.页面标题 AppBar
一、概览图
二、AppBar是什么?
AppBar
页面的标题设置,一个App应该有统一的标题设置。
三、详细
import 'package:flutter/material.dart';
/// 我的页面
/// @author: dingwen
/// @date: 2021/5/9
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
// 标题
title: Text('我的'),
// 标题是否居中
centerTitle: true,
// 背景颜色
backgroundColor: Colors.blue,
// 阴影
elevation: 20.0,
// 左边 widget
leading: BackButton(),
// 后边选项
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () => print("搜索")),
PopupMenuButton<String>(
itemBuilder: (context) => _getPopupMenu(context),
onSelected: (String value) => print(value),
)
],
// appBar 底部选择Tab
bottom: TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.add),text: '添加',),
Tab(icon: Icon(Icons.home),text: "首页",),
],
),
),
body: TabBarView(
children: [
Text('add'),
Text('home page'),
],
),
),
);
}
/// 构建弹出菜单项
_getPopupMenu(BuildContext context) {
return <PopupMenuEntry<String>>[
PopupMenuItem(
value: 'qq',
child: Text('qq'),
),
PopupMenuItem(
value: "wechat",
child: Text('wechat'),
)
];
}
}
标签:Widget,Text,AppBar,value,context,Flutter,页面 来源: https://blog.csdn.net/qq_38020915/article/details/117002795