You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中Navigator.push返回后DropdownButton失效问题求助

问题

开发服装电商APP时,购物车项使用slidable库实现,通过DropdownButton展示商品颜色选项,搭配自定义底部导航栏。存在以下异常:

  • 点击购物车项跳转至ProductView页面,返回购物车后DropdownButton失效;
  • 通过底部导航栏跳转商品页再返回,功能正常。

代码示例

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

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

class CartPageState extends State<CartPage> {
  List<String> dropDownValues = cart.itemList.keys.toList();
  late String dropDownValueShow;

  final textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    debugPrint('$dropDownValues');
    dropDownValueShow = cart.itemList.isEmpty ? '' : dropDownValues[0];
    return Scaffold(
      bottomNavigationBar: CustomBottomNavBar(
        1,
        key: ValueKey(cart.itemList),
      ),
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.black,
        title: const Text(
          "Shopping Cart",
          style: TextStyle(color: Colors.white, fontSize: 17),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: cart.empty
            ? [
          SizedBox(
              width: 200,
              height: 200,
              child: Center(
                child: Text(
                  "Empty Cart",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.grey.shade500,
                    fontSize: 20,
                  ),
                ),
              ))
        ]
            : [
          Expanded(
            child: AnimatedList(
              scrollDirection: Axis.vertical,
              initialItemCount: cart.itemList.length,
              itemBuilder: (context, index, animation) {
                return Slidable(
                  key: UniqueKey(),
                  actionPane: const SlidableDrawerActionPane(),
                  actionExtentRatio: 0.25,
                  actions: const [],
                  secondaryActions: const [],
                  child: _cartItem(),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _cartItem() {
    return GestureDetector(
      key: UniqueKey(),
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
        Navigator.push(
          context,
          PageRouteBuilder(
            pageBuilder: (context, animation1, animation2) =>
            const ProductView(),
            transitionDuration: Duration.zero,
            reverseTransitionDuration: Duration.zero,
          ),
        ).then((_) => setState(() {}));
      },
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.shade200,
              offset: const Offset(0, 2),
              blurRadius: 6,
            ),
          ],
        ),
        child: Row(
          children: <Widget>[
            Text('prod1'),
            const SizedBox(
              width: 10,
            ),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  const SizedBox(height: 10),
                  DropdownButton(
                    isExpanded: true,
                    value: dropDownValueShow,
                    icon: const Icon(Icons.arrow_drop_down),
                    items: cart.itemList.keys.toList().map((String value) {
                      return DropdownMenuItem(
                        value: value,
                        child: Text(value),
                      );
                    }).toList(),
                    onChanged: (String? newValue) {
                      setState(() {
                        dropDownValueShow = newValue!;
                      });
                    },
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
            const SizedBox(
              width: 10,
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange,提问作者nicoacevedor

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.15 07:45:37