问题描述
我有几个按钮,我需要根据按钮点击设置卡片视图的颜色。 基本上,我要为我的帖子添加一个主题,因此在预览页面上,我需要允许用户通过单击按钮来选择他们选择的颜色。
截图: CardView Page with Buttons
按钮代码:
Padding(
padding: const EdgeInsets.only(top: 10),child: Row(
children: [
Expanded(
child: MaterialButton(
onpressed: () {},color: Colors.yellow,shape: CircleBorder(),),Expanded(
child: MaterialButton(
onpressed: () {},color: Colors.orange,color: Colors.brown,color: Colors.blue,color: Colors.green,color: Colors.black,],
卡片视图代码:
Card(
child: Container(
decoration: Boxdecoration(
color: Colors.blue,border: Border.all(
color: MyColors.black,width: 1.5),borderRadius: BorderRadius.circular(10)),child: Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),child: CircleAvatar(
backgroundImage:
CachednetworkImageProvider(
_profileurl),Text(_username),Padding(
padding: const EdgeInsets.all(8.0),child: Obx(
() => Text(
pollDataController1.question.value,style: TextType.boldheading,Obx(
() => ClipRRect(
borderRadius: BorderRadius.circular(10),child: Image.asset(
(pollImageController.imagedisplay.value),width: 320,height: 170,fit: BoxFit.cover,Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0),child: Column(
children: [
Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,children: [
Obx(
() => Text(
pollDataController1
.op1.value +
" ",style: TextStyle(
color: MyColors.offBlack,fontSize: 16.0,Obx(
() => Text(pollDataController1
.op1Emoji.value),SizedBox(
width: 25.0,Obx(
() => Text(
pollDataController1
.op2.value +
" ",Obx(
() => Text(pollDataController1
.op2Emoji.value),SizedBox(height: 13.0),Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,children: [
Obx(
() => Text(
pollDataController1
.op3.value +
" ",Obx(
() => Text(pollDataController1
.op3Emoji.value),Obx(
() => Text(
pollDataController1
.op4.value +
" ",Obx(
() => Text(pollDataController1
.op4Emoji.value),
解决方法
您可以使用颜色的全局变量和点击每个圆形按钮时更改颜色的函数。
举个例子:
Color cardBackgroundColor = Colors.white;
void changeColor(Color changeToColor) {
setState(() {
cardBackgroundColor = changeToColor;
});
}
然后在您的按钮代码中像这样使用它:
Expanded(
child: MaterialButton(
onPressed: changeColor(Colors.yellow),color: Colors.yellow,shape: CircleBorder(),),
并在 Cardview 代码中将其更改为:
Card(child: Container(
decoration: BoxDecoration(
color: cardBackgroundColor,border: Border.all(
color: MyColors.black,width: 1.5),borderRadius: BorderRadius.circular(10)),
这将是最快的方法,尽管它可能不是最干净的。