时间戳

首页 > 解决方案 > 在列表之间切换时，动态多级 CupertinoPicker 会倾斜第一个文本项的对齐方式

flutter - 在列表之间切换时，动态多级 CupertinoPicker 会倾斜第一个文本项的对齐方式

问题描述

我正在尝试创建一个动态的多级 CupertinoPicker。当您从第一个列表中选择位置类型时，它会显示与该类型匹配的位置列表。这部分工作正常，问题是如果我切换到不同的位置列表，第二个位置列表的第一个 Text 小部件会根据第一个位置列表的第一个 Text 小部件缩进。

我尝试使用“对齐：TextAlignment.center”指定文本小部件应与中心对齐。在位置列表之间交换时，我还尝试将位置设置为空。这些都没有解决问题，也没有任何明显的效果。

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-------------- ----------------------

如果需要图片，我将使用它们的链接编辑这篇文章。

标签： flutterflutter-cupertinocupertinopicker

解决方案

我发现了解决方案。见下文：

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],
          ),
        ),

推荐阅读