一、AppBar的基本配置
基本用法
隐藏左侧按钮
appBar: AppBar(
// automaticallyImplyLeading: false, // 隐藏左侧按钮
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
),
title: Text('title'),
centerTitle: true,
actions: [
IconButton(
onPressed: () {
print("这是一个Menu");
},
icon: Icon(Icons.menu)),
],
backgroundColor: Colors.amber,
),
leading和actions 的图标需要是个按钮图标（IconButton）不然您的事件不好处理。
二、TabBar的基本用法
DefaultTabController 必须配置在 MaterialApp的里面Scaffold的外面，并且length 的长度必须与 TabBar的子集和TabBarView的子集保持一致。
DefaultTabController( // 必须配置
length: 2, // ① **②③的长度必须与①相同否则报错**
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: TabBar(
tabs: [ // ②
Tab(
text: "one",
),
Tab(
text: 'two',
)
],
),
),
body: TabBarView(children: [ // ③
Center(
child: Text('OnePage'),
),
Center(
child: Text('TwoPage'),
),
]),
))
tabbar在title中
// TabBar可以配置在bottom中
...
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text("头部"),
centerTitle: true,
bottom: TabBar(
tabs: [
Tab(
text: "one",
),
Tab(
text: 'two',
)
],
),
),
....
tabbar在bottom中
如果是多个Tab那么需要在TabBar添加属性
isScrollable: true,
三、自定义TabBarController
自定义TabBarController与TabBar的基本用法一样。只是增加的controller：这个参数。 如下图为注意点。
自定义TabBarController注意点
class _BaseTabControllerState extends State<BaseTabController>
with SingleTickerProviderStateMixin { // ① 注意点
late TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(vsync: this, length: 2); // ②初始化
}
@override
void dispose() {
_controller.dispose(); // ③销毁
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: TabBar(
controller: _controller,// ④加入TabBar
tabs: [
Tab(
text: "one_controller",
),
Tab(
text: 'two_controller',
)
],
),
),
body: TabBarView(
controller: _controller, // ⑤加入TabBarView
children: [
Container(
margin: EdgeInsets.fromLTRB(5, 20, 0, 0),
child: Text("OnePage_controller"),
),
Container(
child: Text('TwoPage_controller'),
),
]),
);
}
}
android studio快速生成TabBarController模板
1.在一个空页面输入sta回车
2.然后导入
import 'package:flutter/material.dart';
3.将
替换成
