在开发过程中我们100%会使用到导航,当然Flutter也为我们提供了导航控件,但是自带的往往没有没有那么灵活,所以这个时候就需要我们自定义一个导航,下面就给大家讲解如果绘制一个简单的自定义导航。
我们还是通过代码的方式来讲解
我这里给自定义导航类命名为TitleNavBar.dart
import 'package:flutter/material.dart';
class TitleNavBar extends StatefulWidget {
String leftString; // 左边 返回按钮 标题
String titleString; // 标题
String rightString; // 右侧 标题文字
IconData icon; // 右侧 按钮
Color beginColor; // 导航开始渐变色
Color endColor; // 导航结束渐变色
Function callBack;
// 设置默认值
TitleNavBar(
{this.leftString = "返回",
this.titleString = "",
this.rightString = "",
this.icon,
this.beginColor = const Color(0xFFF68C1C),
this.endColor = const Color(0xFFFA3E30),
this.callBack,
Key key})
: super(key: key);
@override
_TitleNavBarState createState() => _TitleNavBarState();
}
class _TitleNavBarState extends State {
double navigationHeight = 40; //导航内容高度
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width, // 设置导航宽度
height: MediaQuery.of(context).padding.top + navigationHeight, // 导航距离顶部距离
decoration: BoxDecoration(
// 设置导航 颜色,可以设置渐变色,传入同样颜色 将会取消渐变色
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
widget.beginColor,
widget.endColor,
],
),
),
// 当行具体内容
child: Container(
margin: new EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: Flex(
direction: Axis.horizontal,
children: [
GestureDetector(
onTap: () {
// 左侧点击按钮
widget.callBack(false);
},
child: Container(
width: 70,
color: Color(0x00000000),
height: navigationHeight,
child: Flex(
direction: Axis.horizontal,
children: [
// 左侧返回按钮图标
Container(
child: Icon(Icons.arrow_back_ios, color: Colors.white),
margin: new EdgeInsets.only(left: 15),
),
// 左侧按钮文字
Expanded(
child: Container(
child: Text(widget.leftString,
style:
TextStyle(fontSize: 15, color: Colors.white)),
),
)
],
),
),
),
// 标题
Expanded(
child: Container(
color: Color(0x00000000),
height: navigationHeight,
alignment: Alignment.center,
child: Text(
widget.titleString,
style: TextStyle(fontSize: 17, color: Colors.white),
),
),
),
// 右侧 按钮,右侧按钮设置图标或者文字,也可以取消
Container(
width: 70,
color: Color(0x00000000),
height: navigationHeight,
child: Container(
alignment: Alignment.centerRight,
padding: new EdgeInsets.only(right: 15),
child: widget.rightString.length == 0 && widget.icon == null
? Container()
: widget.rightString.length == 0
? GestureDetector(
onTap: () {
widget.callBack(true);
},
child: Container(
child: Icon(Icons.arrow_back_ios,
color: Colors.white),
),
)
: GestureDetector(
onTap: () {
widget.callBack(true);
},
child: Container(
child: Text(
"保存",
style: TextStyle(
fontSize: 15, color: Colors.white),
),
),
),
),
),
],
),
),
);
}
}
下面是使用方法
TitleNavBar(rightString: "保存", titleString: "标题",callBack: (status) {
print(status);
}),
到此就完成了自定义导航的使用,status 如果为 false 代表返回,true 为右侧 按钮
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)