[英]How to display alert bar below of AppBar in flutter
表单位于 CustomScrollView 内,我希望警报栏始终固定在应用栏下方,并在选项卡 X 时消失。
当前代码
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,
)
],
);
}
}
谢谢你。 ############################################### ############################################### ############################################### ######
我认为最好这样做。 不要让 AlertBar 的无用 Widget 继承使事情变得过于复杂。
class _BaseLayoutState extends State<BaseLayout> {
bool _showAlert = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
height: MediaQuery.of(context).size.height,
child: CustomScrollView(
slivers: <Widget>[
BaseAppBar(
title: Text('test'),
),
_showAlert
? SliverToBoxAdapter(
child: SizedBox(
height: 80.0,
child: ListTile(
leading: Icon(Icons.error_outline),
title: Text("Please correct form data."),
trailing: IconButton(
onPressed: () {
_showAlert = false;
setState(() {});
},
icon: Icon(Icons.clear),
),
),
),
)
: SliverToBoxAdapter(
child: SizedBox(),
),
/// The rest of the screen where the form and text fields are
SliverFillRemaining(
child: ListView(
children: <Widget>[
Form(
child: Column(
children: <Widget>[
TextFormField(),
TextFormField(),
TextFormField()
],
),
),
/// alert button
Center(
child: RaisedButton(
child: Text('ALERT!'),
onPressed: () {
_showAlert = true;
/// make it go away after a few seconds
Future.delayed(Duration(seconds: 3), () {
_showAlert = false;
setState(() {});
});
setState(() {});
},
),
),
],
),
),
],
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.