即使在 flutter 中使用硬编码宽度，小部件的宽度也不均匀
[英]Uneven widget's width even with hard coded width in flutter
问题描述
I am creating a form with simple labels and input field.
我正在创建一个带有简单标签和输入字段的表单。 Below is the layout code下面是布局代码
child: Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16,8,0,0),
child: Text(
"Purchase Order : Other Details",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.black,
fontSize: 22,
fontFamily: 'Lato',
fontWeight: FontWeight.bold),
),
),
],
),
Container(
height: 20,
),
Row(
children: [
Container(
width: 150,
child: Text(
'Gate In Date'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(left:8,top: 8),
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: Container(
width: 240,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
),
Container(
width: 150,
child: Text(
'Gate Out Date'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(left:8,top: 8),
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: Container(
width: 240,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
)
],
mainAxisAlignment: MainAxisAlignment.start,),
Row(
children: [
Container(
width: 150,
child: Text(
'Gate In Time'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8,left: 8),
child: Container(
width: 240,
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
),
Container(
width: 150,
child: Text(
'Gate Out Time'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(left:8,top: 8),
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: Container(
width: 240,
child: TextFormField(
style: TextStyle(color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 16, right: 16)),
),
),
),
)
],mainAxisAlignment: MainAxisAlignment.start,
),
Padding(
padding: const EdgeInsets.only(top:8.0),
child: Row(mainAxisAlignment: MainAxisAlignment.start
,children: [
Container(
width: 150,
child: Text(
'Tare Weight'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Row(
children: [
Padding(
padding:
const EdgeInsets.only(top: 8,left: 8),
child: Container(
width: 240,
child: Row(
children: [
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16)),
),
),flex: 2,
),
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16)),
),
),flex: 1,
)
],
),
),
),
],
),
Container(
width: 150,
child: Text(
'Gross Weight'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8,left: 8),
child: Container(
width: 240,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,
)),
),
),flex: 2,
),
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,
)),
),
),flex: 1,
)
],
),
),
),
],
),
),
Row(mainAxisAlignment: MainAxisAlignment.start
,children: [
Container(
width: 150,
child: Text(
''.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
Container(
width: 240,
child: Text(''),
),
Padding(
padding:
const EdgeInsets.only(left: 8),
child: Container(
width: 150,
child: Text(
'Net Weight'.toUpperCase(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
fontSize: 16,
fontFamily: 'Lato',
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8),
child: Container(
width: 240,
child: Row(mainAxisAlignment: MainAxisAlignment.start
,children: [
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,
)),
),
),flex: 2,
),
Expanded(
child: Card(
elevation: 5,
borderOnForeground: true,
color: Colors.white,
child: TextFormField(
style: TextStyle(
color: Colors.black87),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding:
EdgeInsets.only(
left: 16,
right: 16,)),
),
),flex: 1,
)
],
),
),
),
],
),
],
)
For every label and input field, I have given same fixed width but still they are not looking equal when I run the app in device对于每个 label 和输入字段，我都给出了相同的固定宽度，但当我在设备中运行应用程序时它们看起来仍然不相等
See the attached screenshot请参阅随附的屏幕截图
1 个解决方案
解决方案1
1 已采纳 2020-10-09 11:18:06
Why don't you structure it the other way around Row(Column(), Column, Column, Column)你为什么不以另一种方式围绕 Row(Column(), Column, Column, Column) 构建它
1st column labels, 2nd fields, 3rd labels, 4th fields第一列标签，第二个字段，第三个标签，第四个字段
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将 Flutter 小部件转换/转换为其宽度的负 50% - Transform/Translate Flutter widget to negative 50% of it's width
Positioned 的宽度或 SizedBox 的宽度都不能在堆栈小部件内工作 - Flutter - Neither Positioned's width or SizedBox's width works inside a stack widget - Flutter
Flutter：当宽度基于屏幕尺寸时，如何为小部件的宽度设置动画？ - Flutter: How can I animate a widget's width when the width is based on screen size?
Flutter 小部件：将宽度设置为剩余宽度而不使用绝对数字 - Flutter Widget: set width to leftover width without using absolute number
Flutter 从另一个小部件更改容器宽度 - Flutter change Container Width from another Widget
Flutter - 如何获取 AspectRatio 小部件的高度和宽度？ - Flutter - how to get the height and width of the AspectRatio widget?
如何获取 flutter 中动态文本小部件的宽度？ - How to get the width of the dynamic text widget in flutter?
如何设置 flutter 切换按钮小部件的宽度 - How to set width of the flutter togglebuttons widget
Flutter：使用中心小部件覆盖最小宽度 - Flutter: Using Center widget overrides min width
如何根据 Flutter Widget 中的 parends 设置宽度 - How to set width according to parends in Flutter Widget
相关标签