flutter CupertinoPicker 使用不显示
2020年9月3日 06:50
编程技术
CupertinoPicker是一个ios风格的齿轮滚动的选择器
CupertinoPicker.builder(
    itemExtent: 40,
    scrollController: FixedExtentScrollController(initialItem: 0),
    backgroundColor: Colors.white,
    onSelectedItemChanged: (index) {
        // 选择
    },
    itemBuilder: (context, index) =>
        // items[index] 返回一个部件显示每一项的内容,
    childCount: items.length,
)
注意事项
在使用 CupertinoPicker 写地区选择器时,发现数据显示不出来,但使用 r 更新就能正常显示。
查找原因:
- 数据分为三列:即省、市、区,
 - 数据都是网络请求的,因此第一次初始化的时候,数据长度是零。
 
刚开始,以为是没有setState(() {}); 更新,但多次设定也没用。
然后发现是因为 CupertinoPicker 接受数据长度为零的数据就没办法正常显示。
因此通过判断直接把数据长度为零的不生成CupertinoPicker,具体原因不知。
最终解决方案:
  List<List<Region>> regionItems = [];
  List<int> regionIndex = [];
  List<FixedExtentScrollController> regionController = [];
  Widget buildPickers() {
    var items = <Widget>[];
    for (var i = 0; i < regionController.length; i++) {
        // 判断是数据的长度,小于1的那一列就不显示
      if (regionItems[i].length < 1) {
        continue;
      }
      items.add(Expanded(
        child: CupertinoPicker.builder(
          itemExtent: 40,
          scrollController: regionController[i],
          backgroundColor: Colors.white,
          onSelectedItemChanged: (index) {
            changeRegion(i, index);
          },
          itemBuilder: (context, index) =>
              buildTextItem(regionItems[i][index].name),
          childCount: regionItems[i].length,
        ),
      ));
    }
    return Expanded(
      child: Row(
        children: items,
      ),
    );
  }
  Widget buildTextItem(String text) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 5.0),
      child: Text(
        text,
        textAlign: TextAlign.center,
        style: const TextStyle(fontSize: 14.0),
      ),
    );
  }