Flutter：如何在Pressed上实现状态管理

Question

我不知道如何在单击按钮时更改我的网格视图的状态，有人可以帮我解决这个问题吗？

所以，我有这个 textButton，它应该在单击时更改我的网格视图的状态，但我不知道如何实现它。下面是我的代码。

从附图来看，当点击水、食物、学校等时，gridview 应该只提供特定的组织..

Widget build(BuildContext context) {
return Container(
  padding: const EdgeInsets.all(20.0),
  child: ListView(
    children: <Widget>[
      ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Container(
          padding: const EdgeInsets.only(left: 20, right: 20),
          height: SizeConfig.screenHeight / 6.5,
          color: kPrimaryColor,
          child: Row(
            children: [
              const CircleAvatar(
                radius: 40,
                backgroundImage: AssetImage(
                    'assets/images/SDG Wheel_Transparent_WEB.png'),
              ),
              const SizedBox(
                width: 10,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Text(
                    "Donate Today!",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontFamily: "Quicksand",
                        decoration: TextDecoration.none),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Text(
                    "Small contributions quickly\nadd up if enough people\ntake up the cause.",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                        decoration: TextDecoration.none),
                  ),
                ],
              ),
              Expanded(child: Container()),
              Container(
                width: 70,
                height: 70,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Color(0xFFf3fafc)),
                child: Center(
                  child: IconButton(
                    icon: SvgPicture.asset("assets/icons/give.svg"),
                    onPressed: () {},
                    color: Color(0xFF69c5df),
                    //size: 30,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      SizedBox(
        height: 30,
      ),
      const Align(
        alignment: Alignment.centerLeft,
        child: Text(
          "Select your desired organisation to donate.",
          style: TextStyle(
              color: Color(0xFF1f2326),
              fontSize: 15,
              decoration: TextDecoration.none),
        ),
      ),
     
      const Divider(color: Colors.black38),
        //here is the textButton
        Container(
        height: 50,
        width: double.infinity,
        color: Colors.white,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              for (int i = 0; i < categories.length; i++)
                Container(
                  width: 90,
                  padding: const EdgeInsets.only(left: 4.0, right: 4.0),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      color: kPrimaryColor,
                    ),
                    child: TextButton(
                      onPressed: () {},   //here i need a way to change the state of 
                                            the grid view 
                      child: Text(categories[i],
                          style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
      const Divider(color: Colors.black38),
      const SizedBox(
        height: 30,
      ),
      GridView.count(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        children: _listItem
            .map((item) => Card(
                  color: Colors.transparent,
                  elevation: 0,
                  child: GestureDetector(
                      onTap: () => Navigator.pushNamed(context, item.route),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            image: DecorationImage(
                                image: AssetImage(item.image),
                                fit: BoxFit.cover)),
                      )),
                ))
            .toList(),
      )
    ],
  ),
);
 }
}

非常感谢。

Answer 1

最简单的做法是使用 .where 或 Iterable https://api.flutter.dev/flutter/dart-core/Iterable/where.html

根据选择筛选项目

基本上，当您按下文本按钮时，您会将类型存储在一个变量中（为此您需要一个 StatefulWidget）

然后你可以使用 where 来过滤你的 _listItem

GridView.count(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  crossAxisCount: 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  children: _listItem
      .where((element) {
        //if your element is included return true else false
        return true;
      })
      .map((item) => Card(
            color: Colors.transparent,
            elevation: 0,
            child: GestureDetector(
                onTap: () => Navigator.pushNamed(context, item.route),
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      image: DecorationImage(
                          image: AssetImage(item.image),
                          fit: BoxFit.cover)),
                )),
          ))
      .toList(),
)

您可以在此处查看示例以了解按钮上的行为： https://dartpad.dev/49f2e4818d933c75a0e6ed1d47a836d2

Flutter：如何在Pressed上实现状态管理

Flutter: How to implement State Management onPressed

state-management

flutter

flutter-gridview