这就是间隙的外观awkward gaps
我想消除差距。我附上的图片来自一个弹出模式,下面是内容的样子:
Container(
height: MediaQuery.of(context).size.height * 0.67,
width: MediaQuery.of(context).size.width * 0.50,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Expanded(
child: Text("Kode Indikator",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmkKode,
),
),
),
const Expanded(
child: Text("Kriteria",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmkKriteria,
),
),
),
const Expanded(
child: Text("Grup Indikator",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmiGroupIndikator,
),
),
),
const Expanded(
child: Text("Indikator",style: TextStyle(fontSize: 12),),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.25,
height:40,
child: TextField(
readOnly: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
labelText: dataList[index].xxtsmiIndikator,
),
),
),
],),
Column(
children: const [
Expanded(
child: Text("Kode Indikator",style: TextStyle(fontSize: 12),),
)
],),
]
)
)
如果你也能帮助我布局技巧,我会很感激,因为我仍然是新的Flutter和如何使这个布局与textfield-text之间的差距,而不是text-textfield现在。我想我一直在错误地使用扩展和灵活,但我不知道确切的。
我试着使用Stack小部件,但最后的结果是元素彼此重叠。
编辑:好吧,经过更多的尝试,我发现这是因为扩展占用尽可能多的空间。当我把Expanded改为SizedBox时,它终于看起来像我想要的了。但是我仍然想知道是否有可能在没有SizedBox的情况下做到这一点,因为我硬编码了高度。
2条答案
按热度按时间xesrikrc1#
请删除扩展的Widget并删除间隙。就像这样
7fyelxc52#
因为使用了
Expanded
,所以会有间隙。Expanded
使得所有可用空间在Column
中的所有Expanded
之间划分。只需直接使用Text
,而无需将它们 Package 在Expanded
中