Flutter 如何在颤振中显示AppBar下方的警告栏
表单位于CustomScrollView内,我希望alertbar始终固定在appbar下方,并在tab X时消失 当前代码Flutter 如何在颤振中显示AppBar下方的警告栏,flutter,flutter-layout,Flutter,Flutter Layout,表单位于CustomScrollView内,我希望alertbar始终固定在appbar下方,并在tab X时消失 当前代码 import 'package:flutter/material.dart'; class BaseAppBar extends StatelessWidget { final Widget title; final bool innerBoxIsScrolled; BaseAppBar({this.title, this.innerBoxIsS
import 'package:flutter/material.dart';
class BaseAppBar extends StatelessWidget {
final Widget title;
final bool innerBoxIsScrolled;
BaseAppBar({this.title, this.innerBoxIsScrolled=false});
@override
Widget build(BuildContext context) {
return SliverAppBar(
backgroundColor: Colors.amber,
pinned: true,
floating: false,
forceElevated: innerBoxIsScrolled,
title: title,
leading: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 20,
),
onPressed: () {
Navigator.of(context).pop();
},
)
);
}
}
class BaseLayout extends StatelessWidget {
final Widget appBar;
final Widget alertBar;
final Widget child;
BaseLayout({this.appBar, this.alertBar, this.child});
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
BaseAppBar(
title: Text(
'test'
),
),
SliverToBoxAdapter(
child: alertBar,
),
SliverToBoxAdapter(
child: child,
)
],
);
}
}
导入“包装:颤振/材料.省道”;
类BaseAppBar扩展了无状态小部件{
最终小部件标题;
最后一个bool InnerBoxIscrowled;
BaseAppBar({this.title,this.innerBoxIsCrolled=false});
@凌驾
小部件构建(构建上下文){
回程滑杆(
背景颜色:Colors.amber,
对,,
浮动:假,
强制提升:内包装箱为羊角形,
标题:标题,,
引导:扁平按钮(
形状:圆形矩形边框(
边界半径:边界半径。圆形(50),
),
子:图标(
Icons.arrow\u back\u ios,
颜色:颜色,白色,
尺码:20,
),
已按下:(){
Navigator.of(context.pop();
},
)
);
}
}
类BaseLayout扩展了无状态小部件{
最终小部件appBar;
最终窗口小部件警报栏;
最后一个孩子;
BaseLayout({this.appBar,this.alertBar,this.child});
@凌驾
小部件构建(构建上下文){
返回自定义滚动视图(
条子:[
BaseAppBar(
标题:正文(
“测试”
),
),
滑动双轴适配器(
孩子:alertBar,
),
滑动双轴适配器(
孩子:孩子,
)
],
);
}
}
多谢各位。
############################################################################################################################################################我认为这样做更好。不要使用AlertBar的无用小部件继承使事情过于复杂
class\u BaseLayoutState扩展状态{
bool\u showart=false;
@凌驾
小部件构建(构建上下文){
返回脚手架(
正文:SizedBox(
高度:MediaQuery.of(context).size.height,
子:自定义滚动视图(
条子:[
BaseAppBar(
标题:文本(“测试”),
),
_显示警报
?滑动双轴适配器(
孩子:大小盒子(
身高:80.0,
孩子:ListTile(
前导:图标(图标、错误和轮廓),
标题:文本(“请更正表格数据”),
尾随:图标按钮(
已按下:(){
_showarert=false;
setState((){});
},
图标:图标(图标。清除),
),
),
),
)
:SliverToBoxAdapter(
子项:SizedBox(),
),
///显示表单和文本字段的屏幕的其余部分
剩余碎片(
子:ListView(
儿童:[
形式(
子:列(
儿童:[
TextFormField(),
TextFormField(),
TextFormField()
],
),
),
///警报按钮
居中(
孩子:升起按钮(
子项:文本('ALERT!'),
已按下:(){
_showarert=true;
///让它在几秒钟后消失
未来。延迟(持续时间(秒:3),(){
_showarert=false;
setState((){});
});
setState((){});
},
),
),
],
),
),
],
),
),
);
}
}
你也可以共享BaseAppBar
吗?@FloatingRock补充道,它只是简单的滑动appbar。