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

Flutter中Filter页面Container点击颜色不即时更新问题求助

问题:点击Container切换颜色在Filter页面需返回才生效,FeedScreen正常

我需要实现点击Container时将其颜色从灰色系切换为白色,FeedScreen文件中该功能运行正常,但Filter文件中必须退出页面再返回才能看到颜色变化,尽管两个文件的实现逻辑完全一致。我怀疑问题可能和从FeedScreen页面点击按钮进入Filter菜单有关,但不确定。另外我试过用GestureDetector替代InkWell,结果还是一样。


无法正常工作的Filter文件代码

class _ExampleState extends State<Example> {
  int _selectedindex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedindex = index;
    });
  }

  int index = 0;
  var random = Random();
  List<Color> myColors = [
    Colors.white,
    Colors.grey.shade900,
    Colors.green,
    Colors.cyan,
    Colors.pink,
  ];

  void changeColorsIndex() {
    setState(() {
      index = random.nextInt(4);
    });
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Container(
      width: size.width,
      height: 40,
      color: Color.fromARGB(255, 28, 28, 28),
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 1.5),
            child: IconButton(
              onPressed: (() {
                setState(
                  () {
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return SingleChildScrollView(
                          scrollDirection: Axis.vertical,
                          child: Container(
                            width: size.width,
                            height: size.height,
                            child: Scaffold(
                              backgroundColor: Colors.black,
                              body: SingleChildScrollView(
                                scrollDirection: Axis.vertical,
                                child: Padding(
                                  padding: const EdgeInsets.only(bottom: 30),
                                  child: Column(
                                    children: [
                                      Center(
                                        child: Padding(
                                          padding:
                                              const EdgeInsets.only(top: 5),
                                          child: IconButton(
                                            onPressed: () {
                                              Navigator.pop(
                                                context,
                                                MaterialPageRoute(
                                                  builder: (context) =>
                                                      TopTab(),
                                                ),
                                              );
                                            },
                                            icon: const Icon(
                                                Icons.arrow_drop_down),
                                            iconSize: 45,
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                      const Gap(15),
                                      Container(
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            InkWell(
                                              onTap: () {
                                                setState(() {
                                                  changeColorsIndex();
                                                });
                                              },
                                              child: Container(
                                                width: 199,
                                                height: 50,
                                                color: myColors[index],
                                                child: const Center(
                                                  child: Text(
                                                    'Men\'s',
                                                    style: TextStyle(
                                                        fontSize: 14,
                                                        fontWeight:
                                                            FontWeight.w600,
                                                        color: Colors.white),
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ),
                        );
                      },
                    );
                  },
                );
              }),
              icon: Icon(Ionicons.options_outline),
              iconSize: 20,
              color: Colors.white,
            ),
          ),
          const Gap(6),
          Text(
            'Filter by size',
            style: TextStyle(
                color: Colors.grey.shade600,
                fontSize: 14,
                fontWeight: FontWeight.w700),
          ),
        ],
      ),
    );
  }
}

功能正常的FeedScreen文件代码

class _FeedScreenState extends State<FeedScreen> {

  int index = 0;
  var random = Random();
  List<Color> myColors = [
    Colors.white,
    Colors.grey.shade900,
    Colors.green,
    Colors.cyan,
    Colors.pink,
  ];

  void changeColorsIndex() {
    setState(() {
      index = random.nextInt(4);
    });
  }


  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      body: ListView(
        children: [
          Container(
            width: size.width,
            height: size.height,
            color: Colors.black,
            child: Column(
              // this column is start of everything and container below is filter part just below app bar
              children: [
                Example(),
                InkWell(
                  onTap: changeColorsIndex,
                  child: Container(
                    width: size.width,
                    height: 450,
                    color: myColors[index],
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: const [
                        Padding(
                          padding: EdgeInsets.only(top: 15, left: 15),
                          child: Text(
                            'Air Force 1 x Premium Goods',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 17,
                                color: Colors.white),
                          ),
                        ),
                        Gap(5),
                        Padding(
                          padding: EdgeInsets.only(left: 15),
                          child: Text(
                            'The Sophia',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 30,
                                color: Colors.white),
                          ),
                        ),
                        Gap(50),
                        Image(
                          image: AssetImage('assets/AF1xPGmain.png'),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.02 05:50:27