android - SingleChildScrollView 高度到最大高度,图像背景颤动
问题描述
在登录屏幕中,有一个背景图像,所有内容都可以滚动但SingleChildScrollView
不显示macth_parent
高度。我的目标是像这里一样设计
class MyLoginOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image:new NetworkImage('https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg')
)
),
child: new BackdropFilter(
filter:new ImageFilter.blur(sigmaX: 1.1,sigmaY:1.1),
child: new Container(
decoration: new BoxDecoration(color: Colors.black45.withOpacity(0.5)),
child: new SingleChildScrollView(
child: new Container(
child: new Column(
children: <Widget>[
new Container(
height: 200.0,
child: new Stack(
children: <Widget>[
new Align(
alignment: AlignmentDirectional.center,
child:new Container(
height: 120.0,
width: 120.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.white30
),
)
),
new Align(
alignment: AlignmentDirectional.center,
child: new Container(
child: new Text("Farha",style: new TextStyle(
color: Colors.white,
fontSize: 14.0,
fontFamily: "WorkSansLight"
),),
),),],))],),),)),), ));}}
我的圆形容器高度约为 200.0,SingleChildScrollView
但未显示全高。
解决方案
所需布局的代码 - 它不是 100%,但可以完成工作。您可以根据需要完成它。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
image: new NetworkImage(
'https://i.pinimg.com/originals/c2/47/e9/c247e913a0214313045a8a5c39f8522b.jpg'))),
),
Center(
child: SingleChildScrollView(
padding: EdgeInsets.all(30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
CircleAvatar(
radius: 58.0,
child: Text('Travel'),
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.person,
color: Colors.white,
),
hintStyle: TextStyle(color: Colors.white),
filled: true,
fillColor: Colors.black45,
hintText: 'Username'),
),
SizedBox(
height: 10.0,
),
TextFormField(
decoration: InputDecoration(
filled: true,
prefixIcon: Icon(Icons.lock, color: Colors.white),
hintStyle: TextStyle(color: Colors.white),
fillColor: Colors.black45,
hintText: 'Password'),
),
SizedBox(
height: 15.0,
),
FlatButton(
onPressed: () {},
child: Text(
'Forgot your Password?',
style: TextStyle(color: Colors.white),
)),
SizedBox(
height: 15.0,
),
RaisedButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text('LOGIN')),
color: Colors.redAccent,
textColor: Colors.white,
),
SizedBox(
height: 10.0,
),
RaisedButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text('REGISTER')),
color: Colors.grey,
textColor: Colors.white,
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
Expanded(
child: Divider(
color: Colors.white,
height: 8.0,
),
),
SizedBox(
width: 8.0,
),
Text(
'OR',
style: TextStyle(color: Colors.white),
),
SizedBox(
width: 8.0,
),
Expanded(
child: Divider(
color: Colors.white,
height: 8.0,
),
)
],
),
Row(
children: <Widget>[
// TODO Social Icons
],
),
],
),
),
),
],
),
);
}
输出:
推荐阅读
- asp.net-core - 在 .NET Core 中为不同的客户端设计 REST API 域模型
- python - 在 python 中编写重复代码的更简洁的方法?
- javascript - 数组中的配对值
- reactjs - 在 Create React App 中使用 React Router 排除生产路线
- asp.net-core - 映射两个对象(带列表)的问题
- javascript - 如何在不重复代码的情况下达到效果?
- iptables - Proxmox-VE 6 / PFSense,iptables 的问题
- spring - 无法在 Hazelcast 中存储春季会议
- r - 请问,这个错误在 R Studio 中是什么意思?
- javascript - ReactPlayer 想要设置播放但收到警告