Flutter ListView实现搜索后点击条目无法弹出对应ModalBottomSheet求助

解决方法 #

你需要给弹出BottomSheet的方法传入当前点击的条目内容，根据传入的内容渲染对应信息即可，具体修改如下：

• 步骤1：调整弹出BottomSheet的方法，增加选中条目入参，同时定义好每个条目对应的介绍映射

// 可以将介绍映射定义在State类内，也可以放在方法内部，这里直接放在方法内做示例
void _testFuction(BuildContext context, String selectedFruit) {
  Map<String, String> fruitIntro = {
    'Apple': '苹果是蔷薇科苹果属植物，果实富含矿物质和维生素，是人们最常食用的水果之一。',
    'Orange': '橙子是芸香科柑橘属植物，果实可以剥皮鲜食其果肉，果肉也可以用作其他食物的调料或附加物。',
    'Banana': '香蕉是芭蕉科芭蕉属植物，热带地区广泛栽培食用，味香、富含营养，终年可收获。',
    'Grapefruit': '西柚又称葡萄柚，是芸香科柑橘属植物，果肉味偏酸带苦，富含维生素C。',
    'Mango': '芒果是漆树科杧果属植物，是著名热带水果，果肉含糖、蛋白质、粗纤维，所含有的维生素A的前体胡萝卜素成分特别高。',
    'Kiwi': '猕猴桃也称奇异果，果实一般呈椭圆形，表皮覆盖浓密绒毛，果肉呈亮绿色，内有一排黑色或者红色的种子，口感酸甜。',
    'Grapes': '葡萄是葡萄科葡萄属植物，果实可以生食或制葡萄干，也可以酿酒。'
  };
  showModalBottomSheet(
    context: context,
    builder: (BuildContext bc) {
      return Scaffold(
        appBar: AppBar(
          title: Text(selectedFruit),
          automaticallyImplyLeading: false,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Color(0xffFBD23E), Color(0xffF6BE03)],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter),
            ),
          ),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          child: Text(
            fruitIntro[selectedFruit] ?? '暂无对应介绍',
            style: TextStyle(fontSize: 18, fontFamily: 'Avenir'),
          ),
        ),
      );
    },
  );
}

• 步骤2：修改ListView条目的点击事件，把当前点击的条目内容传入方法
  找到ListView.builder内GestureDetector的onTap回调，修改为以下代码：

onTap: () {
  String selectedItem = _textEditingController.text.isNotEmpty
      ? glossarListOnSearch[index]
      : glossarList[index];
  _testFuction(context, selectedItem);
},

提示：如果_testFuction当前是全局函数，你也可以把它移到_GlossarScreenState类内部，避免定义全局函数带来的维护问题

实现效果参考 #

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