使用flutter设计一个宽500高300的容器;内部第一行左侧为一个图标和文字,距离左边30,右侧为一个蓝色文字距离右边30,第二行居中为稍大一些的文字,第三行左侧为带标题的输入框,距离左边30,右侧为带标题输入框,距离右边30
时间: 2024-02-25 14:59:34 浏览: 90
flutter 屏幕尺寸适配和字体大小适配的实现
好的,以下是Flutter代码实现:
```
Container(
width: 500.0,
height: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Icon(Icons.info),
),
Text(
'信息',
style: TextStyle(fontSize: 18.0),
),
Spacer(),
Padding(
padding: const EdgeInsets.only(right: 30.0),
child: Text(
'编辑',
style: TextStyle(color: Colors.blue),
),
),
],
),
SizedBox(
height: 20.0,
),
Center(
child: Text(
'稍大一些的文字',
style: TextStyle(fontSize: 24.0),
),
),
SizedBox(
height: 20.0,
),
Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('输入框1标题'),
SizedBox(
height: 5.0,
),
TextField(
decoration: InputDecoration(
hintText: '请输入内容',
),
),
],
),
),
SizedBox(
width: 50.0,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('输入框2标题'),
SizedBox(
height: 5.0,
),
TextField(
decoration: InputDecoration(
hintText: '请输入内容',
),
),
],
),
),
],
),
],
),
);
```
希望能够满足您的需求。如果需要更改样式,可以根据需要进行调整。
阅读全文