我用 api 中的 listview.builder 创建了一个卡片列表。现在我想在点击一张卡片时更改墨水瓶水龙头中的卡片颜色
I have created a card list with listview.builder from api. Now i want to change a card color in inkwell tap when one card is tapped
我想在点击卡片时更改卡片颜色。我做了所有的功能。我也设置了墨水瓶以进行敲击。一切都准备好了,但我很困惑如何在点击时更改特定卡片的颜色。尝试使用 bool 来更改卡片颜色。但是当我点击一张卡片时,所有卡片的颜色都在改变。这不是我想要的。我只希望一张卡片的颜色在被点击时发生变化。
isPressed ? Colors.blueAccent : Colors.white,
InkWell(
onTap: () {
setState(() {
isPressed = !isPressed;
});
在 listview.builder 我可以从 api 获取卡中的数据。
ListView.builder(
itemCount: widget.notification == null
? 0
: widget.notification.length,
itemBuilder: (context, index) {
return
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: isPressed ? Colors.blueAccent : Colors.white,
child: Padding(
padding: EdgeInsets.all(16.0),
child: InkWell(
onTap: () {
setState(() {
isPressed = !isPressed;
});
Navigator.push(
context,
new MaterialPageRoute(
builder: (BuildContext context) =>
new DetailPage()));
},
child: Column(
children: <Widget>[
Row(
children: [
SizedBox(
width: 20,
),
Text(
'Status',
style: TextStyle(
fontWeight: FontWeight.bold),
),
SizedBox(
width: 67,
),
Text(widget.notification[index]["data"]
["message"]
.toString()),
],
),
你可以试试这个例子。
复制粘贴代码
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return MyCard(isPressed: false);
});
}
}
class MyCard extends StatefulWidget {
final bool isPressed;
const MyCard({Key key, this.isPressed}) : super(key: key);
@override
_MyCardState createState() => _MyCardState();
}
class _MyCardState extends State<MyCard> {
bool _isPressed;
@override
void initState() {
_isPressed = widget.isPressed;
super.initState();
}
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
color: _isPressed ? Colors.blueAccent : Colors.white,
child: InkWell(
onTap: () {
setState(() {
_isPressed = !_isPressed;
});
},
child: Container(
height: 50,
),
),
);
}
}
我想在点击卡片时更改卡片颜色。我做了所有的功能。我也设置了墨水瓶以进行敲击。一切都准备好了,但我很困惑如何在点击时更改特定卡片的颜色。尝试使用 bool 来更改卡片颜色。但是当我点击一张卡片时,所有卡片的颜色都在改变。这不是我想要的。我只希望一张卡片的颜色在被点击时发生变化。
isPressed ? Colors.blueAccent : Colors.white,
InkWell(
onTap: () {
setState(() {
isPressed = !isPressed;
});
在 listview.builder 我可以从 api 获取卡中的数据。
ListView.builder(
itemCount: widget.notification == null
? 0
: widget.notification.length,
itemBuilder: (context, index) {
return
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: isPressed ? Colors.blueAccent : Colors.white,
child: Padding(
padding: EdgeInsets.all(16.0),
child: InkWell(
onTap: () {
setState(() {
isPressed = !isPressed;
});
Navigator.push(
context,
new MaterialPageRoute(
builder: (BuildContext context) =>
new DetailPage()));
},
child: Column(
children: <Widget>[
Row(
children: [
SizedBox(
width: 20,
),
Text(
'Status',
style: TextStyle(
fontWeight: FontWeight.bold),
),
SizedBox(
width: 67,
),
Text(widget.notification[index]["data"]
["message"]
.toString()),
],
),
你可以试试这个例子。 复制粘贴代码
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return MyCard(isPressed: false);
});
}
}
class MyCard extends StatefulWidget {
final bool isPressed;
const MyCard({Key key, this.isPressed}) : super(key: key);
@override
_MyCardState createState() => _MyCardState();
}
class _MyCardState extends State<MyCard> {
bool _isPressed;
@override
void initState() {
_isPressed = widget.isPressed;
super.initState();
}
@override
Widget build(BuildContext context) {
return Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
color: _isPressed ? Colors.blueAccent : Colors.white,
child: InkWell(
onTap: () {
setState(() {
_isPressed = !_isPressed;
});
},
child: Container(
height: 50,
),
),
);
}
}