Flutter中点击Chip调用ShowPickerUnit无法显示选择器求助

核心问题 #

你只是创建了ShowPickerUnit的Widget实例，但没有通过Flutter的弹窗/导航机制将它渲染到界面上。直接调用ShowPickerUnit()不会触发任何界面展示操作。

修复方案 #

使用showModalBottomSheet方法来弹出你的选择器组件——这完全匹配你写的底部选择器的布局样式。

修改后的完整代码 #

1. 调整chipGoal方法（添加context参数并修改点击事件）

Widget chipGoal(BuildContext context) {
  return Row(
    children: [
      Wrap(
        spacing: 10,
        children: [
          InkWell(
            child: Chip(
              label: Text('Working'),
              avatar: Icon(
                Icons.work,
                color: Colors.red,
              ),
              backgroundColor: Colors.amberAccent,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
            ),
            onTap: () {
              // 用showModalBottomSheet弹出选择器
              showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
                ),
                builder: (ctx) {
                  return ShowPickerUnit();
                },
              );
            },
          ),
          Chip(
            label: Text('Music'),
            avatar: Icon(Icons.headphones),
            backgroundColor: Colors.lightBlueAccent,
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          ),
          Chip(
            label: Text('Music'),
            avatar: Icon(Icons.headphones),
            backgroundColor: Colors.lightBlueAccent,
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          ),
        ],
      ),
    ],
  );
}

2. （可选）优化ShowPickerUnit的布局（添加SafeArea避免底部遮挡）

class ShowPickerUnit extends StatefulWidget {
  const ShowPickerUnit({Key key}) : super(key: key);

  @override
  _ShowPickerUnitState createState() => _ShowPickerUnitState();
}

class _ShowPickerUnitState extends State<ShowPickerUnit> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        mainAxisSize: MainAxisSize.min, // 让Column只占需要的高度
        children: [
          Container(
            decoration: BoxDecoration(
              color: Color(0xffffffff),
              border: Border(
                bottom: BorderSide(
                  color: Color(0xff999999),
                  width: 0.5,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CupertinoButton(
                  child: Text('Cancel'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  padding: const EdgeInsets.symmetric(
                    horizontal: 16.0,
                    vertical: 5.0,
                  ),
                ),
                DefaultTextStyle(
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                  child: Text('Select what you want'),
                ),
                CupertinoButton(
                  child: Text('Confirm'),
                  onPressed: () {
                    // 这里可以添加选择后的逻辑，比如返回选中值
                    Navigator.of(context).pop();
                  },
                  padding: const EdgeInsets.symmetric(
                    horizontal: 16.0,
                    vertical: 5.0,
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 250,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
            ),
            child: CupertinoPicker(
              children: [
                Text("India"),
                Text("Usa"),
                Text("Uk"),
                Text("Australia"),
                Text("Africa"),
                Text("New zealand"),
                Text("Germany"),
                Text("Italy"),
                Text("Russia"),
                Text("China"),
              ],
              onSelectedItemChanged: (value) {
                // 记录选中的索引
              },
              itemExtent: 25,
            ),
          ),
        ],
      ),
    );
  }
}

使用注意 #

在调用chipGoal时需要传入当前的BuildContext，比如在页面的build方法里：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: chipGoal(context),
  );
}

内容的提问来源于stack exchange，提问作者Laurent Thomas