flutter 刷新文件之前容器不会改变颜色

qnyhuwrf  于 2023-02-05  发布在  Flutter
关注(0)|答案(2)|浏览(138)

我想改变容器的颜色onTap从灰色阴影到白色,一切正常,在我的FeedScreen文件,但在过滤器文件,我需要退出,然后回去看看变化,即使我做了一切完全相同的FeedScreen和过滤器文件。我认为这个问题有一些与事实有关,我进入过滤器菜单从饲料屏幕上点击按钮,但我不确定。
这是过滤器文件,无法正常工作:

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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

我也试过手势装饰,甚至是同样的东西,但它就是不起作用

lawou6xi

lawou6xi1#

您可以添加一个StatefulBuilder小部件,使您的showDialog能够使用setState。请尝试一下,然后让我知道它是否有效

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 StatefulBuilder(builder: (context, setState) {
                          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),
          ),
        ],
      ),
    );
  }
}
6kkfgxo0

6kkfgxo02#

在筛选文件中编写了不同的onTap方法
变化

onTap: () {
          setState(() {
             changeColorsIndex();
           });
         },

onTap: changeColorsIndex,

在过滤器文件中,使用有状态构建器 Package 对话框,如here所示

相关问题