// @Description: 自定义组件
// @Author: 陈胜辉
// @Date: 2019-12-05 08:37:35
// @Version: 版本号, YYYY-MM-DD
// @LastEditors: 陈胜辉
// @LastEditTime: 2019-12-05 08:38:46
// @Deprecated: 否
// 备注
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/tool/data_helper.dart';
import 'package:flutter_app/util/routerUtil.dart';
/// MARK:自定义导航栏
// @LastEditors: 陈胜辉
// @Version: 版本号, YYYY-MM-DD
// @param {type}
// @return:
// @Deprecated: 否
// 备注
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
CustomAppBar({
Key key,
this.height,
this.defaultLeft = true,
this.opacity = 1.0,
this.sapce = 5.0,
this.middleText = '',
this.middle,
this.backgroundColor,
this.background,
this.actionsMaxW,
this.leftActions,
this.rightActions,
}) : assert(height == null || height > CommonData.navAndStatusH,
'导航栏高度最小为${CommonData.navAndStatusH}'),
super(key: key);
//高度
final double height;
//默认左侧按钮
final bool defaultLeft;
//屏幕两边空隙
final double sapce;
//透明度
final double opacity;
//标题文字
final String middleText;
//中间视图
final Widget middle;
//背景颜色
final Color backgroundColor;
//背景视图
final Widget background;
//默认 _actionW * count 如果超过需要设置
final double actionsMaxW;
//按钮集合
final List<Widget> leftActions;
final List<Widget> rightActions;
@override
Widget build(BuildContext context) {
//配置视图
return _handleWidget(context);
}
/// MARK:处理组件
// @LastEditors: 陈胜辉
// @Version: 版本号, YYYY-MM-DD
// @param {type}
// @return:
// @Deprecated: 否
// 备注
Widget _handleWidget(BuildContext context) {
double _actionW = 48.0;
//数据处理
//背景视图
Widget _background = this.background;
if (_background == null) {
_background = Container(
color: (this.backgroundColor != null)
? this.backgroundColor
: Color.fromRGBO(97, 148, 244, 1),
child: null,
);
}
//透明度(0 ~ 1)
double _opacity = max(min(this.opacity, 1), 0);
//事件宽度
double _actionsMaxW = this.actionsMaxW;
//左侧组件集合
List<Widget> _leftActions = this.leftActions;
//默认左侧返回按钮
if (null == _leftActions && defaultLeft) {
_leftActions = [_getNavBack(context)];
}
//取出有多少个按钮
int count = max((_leftActions != null) ? _leftActions.length : 0,
(this.rightActions != null) ? this.rightActions.length : 0);
if (null == _actionsMaxW) {
//默认
_actionsMaxW = count * _actionW;
}
//中间组件
Widget _middle = this.middle;
if (null == _middle) {
_middle = Container(
alignment: Alignment.center,
child: Text(
middleText,
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
);
}
// 返回组件
return Opacity(
opacity: _opacity,
child: Stack(
children: <Widget>[
//底部背景
Container(
height: this.preferredSize.height,
child: _background,
),
//上方内容
Container(
height: CommonData.navH,
margin: EdgeInsets.only(
top: this.preferredSize.height - CommonData.navH,
left: this.sapce,
right: this.sapce,
),
child: Row(
children: <Widget>[
//左边
Container(
width: _actionsMaxW,
child: (null == _leftActions)
? null
: Row(
children: _leftActions,
),
),
//中间视图
Expanded(
child: _middle,
),
//右边
Container(
width: _actionsMaxW,
child: (null == rightActions)
? null
: Row(
children: rightActions,
),
),
],
),
),
],
),
);
}
/// MARK:导航栏按钮
// @LastEditors: 陈胜辉
// @Version: 版本号, YYYY-MM-DD
// @param {type}
// @return:
// @Deprecated: 否
// 备注
Widget _getNavBack(BuildContext context) {
return BackButton(
color: Colors.white,
onPressed: () {
RouterUtil.pop(context);
},
);
}
@override
Size get preferredSize => Size.fromHeight(
max(CommonData.navAndStatusH, ((this.height == null) ? 0 : this.height)));
}
Flutter 自定义组件之导航栏
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 介绍 uni-app自带的底部导航栏虽然也很好用,但是遇到中间需要有一个自定义按钮的需求的时候如果使用自带的mid...
- flutter自定义导航栏更改状态栏颜色兼容Android,IOS flutter下自定义导航栏更改状态栏背景颜色...
- 有道是 不积硅步,无以至千里 ;不积小流,无以成江海 。 这章内容比较简单 ,就直接贴上代码 自定义组件MyApp...
- 当今的应届毕业生越来越多,竞争压力越来越大,如果一个人没有一个很明显的个人核心竞争力,很难在社会上生存,即使有,如...