我有问题，以处理宽度在这个容器。它成为小和重叠在其他容器。图片波纹管作为您的参考。
的数据
并将下面的代码作为参考......
Container(
width: 660.0,
margin: EdgeInsets.only(top: 5),
child: Row(children: [
Column(children: [
Container(
width: 90.0,
height: 40.0,
child: Center(
child: Text(
"Serial Number",
textAlign: TextAlign.left,
style: TextStyle(color: Colors.black),
),
),
),
Container(
width: 400.0,
height: 30.0,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius:
new BorderRadius.circular(2.0)),
child: Padding(
padding: EdgeInsets.only(
left: 15,
right: 5,
top: 2,
bottom: 2),
child: TextFormField(
// initialValue: '',
decoration: const InputDecoration(
border: InputBorder.none,
),
)),
),
]),
]),
),
Container(
width: data.size.width,
margin: EdgeInsets.only(top: 1),
child: Scrollbar(
isAlwaysShown: true,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(children: [
Container(
child: Center(
child: Text('1',
style: TextStyle(
color:
Colors.white))),
height: 40,
width: 306,
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey),
color: Colors.grey[600])),
Table(
defaultColumnWidth:
FixedColumnWidth(
data.size.width * 0.1),
border: TableBorder.all(
width: 1.0,
color: Colors.grey[500]),
children: [
TableRow(
children: [
"A",
"B",
"C",
"D"
]
.map((label) =>
Container(
height: 40,
color: Colors
.black,
padding: EdgeInsets
.symmetric(
vertical:
4),
child: Center(
child: Text(
label,
textAlign:
TextAlign
.center,
style: TextStyle(
color: Colors
.white),
))))
.toList()),
...this.rowList.map((row) {
return TableRow(
children: [
'valueA',
'valueB',
'valueC',
'valueD'
]
.map((label) =>
Container(
decoration: BoxDecoration(
color: Colors
.white),
padding: EdgeInsets
.symmetric(
vertical:
4),
child: TextFormField(
initialValue: row['1'][label],
onChanged: (value) {
row['1'][label] =
value;
print(
row);
print(row[
'1']);
updateDetails();
},
cursorColor: Colors.grey,
keyboardType: TextInputType.text,
decoration: new InputDecoration(
border:
InputBorder.none,
focusedBorder:
InputBorder.none,
enabledBorder:
InputBorder.none,
errorBorder:
InputBorder.none,
disabledBorder:
InputBorder.none,
isDense:
true,
contentPadding: EdgeInsets.symmetric(
horizontal:
4,
vertical:
4),
),
style: TextStyle(fontSize: data.size.width * 0.016))))
.toList());
}).toList()
]),
Container(
child: Center(
child: Text('2',
style: TextStyle(
color:
Colors.white))),
height: 40,
width: 306,
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey),
color: Colors.grey[600])),
Table(
defaultColumnWidth:
FixedColumnWidth(
data.size.width * 0.1),
border: TableBorder.all(
width: 1.0,
color: Colors.grey[500]),
children: [
TableRow(
children: [
"A",
"B",
"C",
"D"
]
.map((label) =>
Container(
height: 40,
color: Colors
.black,
padding: EdgeInsets
.symmetric(
vertical:
4),
child: Center(
child: Text(
label,
textAlign:
TextAlign
.center,
style: TextStyle(
color: Colors
.white),
))))
.toList()),
...this.rowList.map((row) {
return TableRow(
children: [
'valueA',
'valueB',
'valueC',
'valueD'
]
.map((label) =>
Container(
decoration: BoxDecoration(
color: Colors
.white),
padding: EdgeInsets
.symmetric(
vertical:
4),
child: TextFormField(
initialValue: row['2'][label],
onChanged: (value) {
row['2'][label] =
value;
print(
row);
print(row[
'2']);
updateDetails();
},
cursorColor: Colors.grey,
keyboardType: TextInputType.text,
decoration: new InputDecoration(
border:
InputBorder.none,
focusedBorder:
InputBorder.none,
enabledBorder:
InputBorder.none,
errorBorder:
InputBorder.none,
disabledBorder:
InputBorder.none,
isDense:
true,
contentPadding: EdgeInsets.symmetric(
horizontal:
4,
vertical:
4),
),
style: TextStyle(fontSize: data.size.width * 0.016))))
.toList());
}).toList()
]),
])
))),
]);字符串
提前感谢......
“Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incidididunt ut labore et dolore magna aliqua
1条答案
按热度按时间xzv2uavs1#
@Fash我已经根据我的理解审查了你的代码，并将行 Package 在
SingleChildScrollView中以启用水平滚动。使用expanded允许第一个容器占用剩余的垂直空间。根据需要调整宽度值以避免任何重叠。我认为这会有所帮助！