我有两个图像，用于固定或取消固定颤振数据

Question

我有两个处于flutter中的图像，用于固定和取消固定列表视图中的数据，因此我的程序是，当我单击固定图像时，取消固定图像应隐藏，当我点击取消固定图像时应隐藏固定图像。那么如何在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变量的值并显示相关图像即可，如果为true，则显示取消固定图像else pin图像。

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