dart - 卡片宽度与父级匹配:颤动
问题描述
我是 Flutter 的新手,所以我想知道如何设置宽度以匹配父布局宽度
new Scaffold(
body: new Container(
decoration: new BoxDecoration(color: AppColors.hoBlue),
child: Padding(
padding: EdgeInsets.all(20.0),
child: new Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Stack(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.all(20.0),
child: Card(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 0.0, 20.0,20.0),
child: Column(
children: <Widget>[
Card(
elevation: 10.0,
child: Padding(
padding: EdgeInsets.all(20.0),
child:
Text("Sign Up Here"),
),
),
TextField(
decoration: InputDecoration(
labelText: "Email",
hintText: "example@mail.com",
),
autofocus: true,
),
TextField(
decoration: InputDecoration(
labelText: "Password",
),
autofocus: true,
),
SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(
color: AppColors.hoBlue,
child: Text(
"Sign In",
style: TextStyle(
color: Colors.white,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
onPressed: () => print('Sign In'),
),
)
],
)),
),
),
),
],
)
],
),
],
)),
),
));
我需要帮助才能与父母一起制作卡片叠,比如 我想要的结果
我已经尝试使用堆栈,但结果卡父卡与第一张卡重叠。
我对 Expanded 标签了解一点,但 Expanded expand view to both方向,我不知道该怎么做。如果您知道,请帮助我,在此先感谢。
解决方案
您不需要Stack
获得该视图 - 可以使用Column
&Material
小部件来完成。
return Scaffold(
body: new Container(
decoration: new BoxDecoration(color: Colors.blue),
child: new Center(
child: MergeSemantics(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Material(
elevation: 24.0,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Sign Up Here"),
),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 10.0, 20.0, 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
decoration: InputDecoration(
labelText: "Email",
hintText: "example@mail.com",
),
autofocus: true,
),
TextField(
decoration: InputDecoration(
labelText: "Password",
),
autofocus: true,
),
SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(
color: Colors.blue,
child: Text(
"Sign In",
style: TextStyle(
color: Colors.white,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
onPressed: () => print('Sign In'),
),
)
],
)),
],
),
),
],
),
),
)),
));
推荐阅读
- c# - 机器人有点困惑以捕捉用户的意图
- python - 计算时差并将日期时间元素拆分为变量
- react-native - getDerivedStateFromProps() 与 componentDidUpdate()
- sql-server - 如何运行这个 SQL 语句 sp_configure 'show advanced options', 1; 在水晶报表中?
- flutter - 在获取请求中发送标头
- docker - 如何在我的 Windows 主机上进行 Docker 容器和 Linux VM 之间的通信
- mongodb - 我如何在猫鼬中填充自己的模态的参考
- python - 如何在 TensorFlow 中生成自定义批处理数据
- excel - 获取文件夹和子文件夹中的所有文件
- javascript - 从组件更改 QR 码的内容