我正在尝试创建动态多级CupertinoPicker。当您从第一个列表中选择位置类型时,它将显示与该类型匹配的位置列表。这部分工作正常,问题在于,如果我交换到其他位置列表,则第二个位置列表的第一个Text小部件会根据第一个位置列表的第一个Text小部件缩进。
我尝试使用“ alignment:TextAlignment.center”指定“文本”小部件应与中心对齐。在位置列表之间交换时,我还尝试将位置设置为null。这些都不能解决问题或没有任何明显效果。
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.only(bottom: 5.0),
height: pickerHeight,
width: logicalSize.width,
child: CupertinoPicker(
backgroundColor: Colors.white,
itemExtent: 32.0,
onSelectedItemChanged: (selectedIndex) {
setState(() {
location = null;
locationType = locationTypeList[selectedIndex];
});
},
children: pickerLocationType,
),
),
Container(
height: pickerHeight,
width: logicalSize.width,
child: CupertinoPicker(
backgroundColor: Colors.white,
itemExtent: 30.0,
onSelectedItemChanged: (selectedIndex) {
setState(() {
location = null;
if (locationType == 'Campus') {
location = campusList[selectedIndex];
}
if (locationType == 'City') {
location = cityList[selectedIndex];
}
});
},
children: pickerMap[locationType],
),
),
结果应该是第一行是(将其设置为CupertinoPicker):
----------------------------------城市1 ----------- ---------------------------
----------------------------------城市2 ----------- ---------------------------
但它看起来更像:
-------------------------------城市1 -------------- ---------------------------
----------------------------------城市2 ----------- ---------------------------
如果需要图像,我将通过这篇文章的链接对其进行编辑。
答案 0 :(得分:0)
我已经找到了解决方案。参见下文:
Container(
key: ValueKey(this._locationType),
height: pickerHeight,
width: logicalSize.width,
child: CupertinoPicker(
backgroundColor: Colors.white,
itemExtent: 30.0,
onSelectedItemChanged: (selectedIndex) {
setState(() {
location = null;
if (locationType == 'Campus') {
location = campusList[selectedIndex];
}
if (locationType == 'City') {
location = cityList[selectedIndex];
}
});
},
children: pickerMap[locationType],
),
),