一统天下 flutter - widget 架构类: Scaffold 的 AppBar - 顶部导航栏
一统天下 flutter - widget 架构类: Scaffold 的 AppBar - 顶部导航栏
示例如下:
lib\widget\structure\scaffold_app_bar.dart
/*
* AppBar - 顶部导航栏(一般在 Scaffold 中使用)
*
* AppBar 分为 toolbar 和 bottom 两部分,bottom 显示在 toolbar 下面
*/
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_demo/helper.dart';
class ScaffoldAppBarDemo extends StatefulWidget {
const ScaffoldAppBarDemo({Key? key}) : super(key: key);
@override
_ScaffoldAppBarDemoState createState() => _ScaffoldAppBarDemoState();
}
class _ScaffoldAppBarDemoState extends State<ScaffoldAppBarDemo> {
var _primary = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
/// toolbarHeight: 100, /// toolbar 的高度
backgroundColor: Colors.green, /// 背景颜色
shadowColor: Colors.black, /// 阴影颜色
elevation: 10, /// 阴影高度
leading: Builder( /// 左侧按钮
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.arrow_back_ios_new),
onPressed: () { Navigator.of(context).pop(); },
);
},
),
leadingWidth: 80, /// 左侧按钮占位的宽度
/// automaticallyImplyLeading: true, /// 当没有指定 leading 时,是否自动显示左侧的返回按钮并自动实现返回按钮的逻辑
foregroundColor: Colors.orange, /// 文本或图标按钮的颜色
title: const Text('title'), /// title
titleTextStyle: TextStyle(color: Colors.red), /// title 的颜色
centerTitle: true, /// title 是否居中(不居中则居左)
titleSpacing: 20, /// title 居左显示时,其位置的左侧偏移量
toolbarTextStyle: TextStyle(), /// toolbar 上左侧按钮和右侧按钮的文本样式
actions: <Widget>[ /// 右侧的按钮集合
IconButton(
icon: const Icon(Icons.favorite),
onPressed: () { },
),
IconButton(
icon: const Icon(Icons.settings),
onPressed: () { },
),
],
shape: BeveledRectangleBorder( /// 边框
side: const BorderSide(width: 2, color: Colors.red),
borderRadius: BorderRadius.circular(0)
),
toolbarOpacity: 1, /// toolbar 中的内容的不透明度
bottom: AppBar( /// bottom 是 toolbar 下显示的 widget(通常这里可以用来显示一个 TabBar,请参见 scaffold_tab_bar.dart)
automaticallyImplyLeading: false,
title: const Text('bottom'),
),
bottomOpacity: 1, /// bottom 中的内容的不透明度
primary: _primary, /// 内容是否需要为了避免遮挡 statusBar 而往下偏移
systemOverlayStyle: const SystemUiOverlayStyle( /// 系统遮盖层的样式(系统遮盖层包括顶部状态栏和底部导航栏)
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent
),
),
body: Center(
child: MyButton(
child: MyText("primary: $_primary"),
onPressed: () {
setState(() {
_primary ^= true;
});
},
),
),
);
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2012-03-22 稳扎稳打Silverlight(67) - 5.0被信任的应用程序之访问本地文件系统, 支持多窗口, 被信任的程序在浏览器中运行, Call Windows API