flutter - 我有两个图像用于在颤振中固定或取消固定数据

Question

我在颤动中有两个图像用于固定和取消固定列表视图中的数据，所以我的程序是，当我单击固定图像时，应该隐藏取消固定图像，当我单击取消固定图像时，应该隐藏固定图像。那么如何在flutter中实现这个东西。

这是我的演示代码

class PinUnpinData extends StatefulWidget {
  @override
  _PinUnpinDataState createState() => _PinUnpinDataState();
}

class _PinUnpinDataState extends State<PinUnpinData> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "Pin-Unpin",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            InkWell(
                onTap: () {
                  
                },
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Image.asset(
                    "assets/images/pin.png",
                    height: 20,
                    width: 20,
                  ),
                )),
            InkWell(
                onTap: () {},
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Image.asset(
                    "assets/images/unpin.png",
                    height: 20,
                    width: 20,
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

Answer 1

创建一个局部变量来跟踪pinned状态。setState()然后使用该方法在点击按钮时更新该变量的状态。此外，为了显示相关图像，只需检查pinned变量的值并显示相关图像，如果为真则显示取消固定图像否则固定图像。

class _PinUnpinDataState extends State<PinUnpinData> {

  bool pinned = false; // to keep track if it's pinned or not

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "Pin-Unpin",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: InkWell(
            onTap: () {
              setState(() {
                pinned = pinned ? false : true; // check if pinned is true, if its true then set it false and voice versa
              });
            },
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Image.asset(
                pinned
                    ? "assets/images/unpin.png" //show this image when it's pinned
                    : "assets/images/pin.png", // show this image when it not pinned
                height: 20,
                width: 20,
              ),
            )),
      ),
    );
  }
}