Flutter Widget -AppBar
  MKubsKtBzXL1 2023年11月02日 59 0


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

文章目录

  • ​​Flutter Widgets​​
  • ​​一、概览图​​
  • ​​二、AppBar是什么?​​
  • ​​三、详细​​

​​1.材料设计根控件 MaterialApp​​2.页面基础布局 Scaffold
3.页面标题 AppBar

一、概览图

Flutter Widget -AppBar_flutter


Flutter Widget -AppBar_dart_02

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


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   40   0   0 ide抗锯齿
  b1UHV4WKBb2S   2023年11月13日   34   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   27   0   0 flutterDart
  zSWNgACtCQuP   2023年11月13日   32   0   0 ide
MKubsKtBzXL1