在刷新文件之前容器不会改变颜色
[英]Container not changing color until file is refreshed
问题描述
我想将容器 onTap 的颜色从灰色阴影更改为白色，并且在我的 FeedScreen 文件中一切正常，但在过滤器文件中我需要退出然后 go 返回以查看更改，即使我在 FeedScreen 和过滤器文件中所做的一切完全相同. 我认为这个问题与我在点击按钮时从提要屏幕进入过滤器菜单这一事实有关，但我不确定。
这是无法正常工作的过滤器文件：
class _ExampleState extends State<Example> {
int _selectedindex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedindex = index;
});
}
int index = 0;
var random = Random();
List<Color> myColors = [
Colors.white,
Colors.grey.shade900,
Colors.green,
Colors.cyan,
Colors.pink,
];
void changeColorsIndex() {
setState(() {
index = random.nextInt(4);
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: 40,
color: Color.fromARGB(255, 28, 28, 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 1.5),
child: IconButton(
onPressed: (() {
setState(
() {
showDialog(
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
width: size.width,
height: size.height,
child: Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.only(bottom: 30),
child: Column(
children: [
Center(
child: Padding(
padding:
const EdgeInsets.only(top: 5),
child: IconButton(
onPressed: () {
Navigator.pop(
context,
MaterialPageRoute(
builder: (context) =>
TopTab(),
),
);
},
icon: const Icon(
Icons.arrow_drop_down),
iconSize: 45,
color: Colors.white,
),
),
),
const Gap(15),
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
changeColorsIndex();
});
},
child: Container(
width: 199,
height: 50,
color: myColors[index],
child: const Center(
child: Text(
'Men\'s',
style: TextStyle(
fontSize: 14,
fontWeight:
FontWeight.w600,
color: Colors.white),
),
),
),
),
],
),
),
],
),
),
),
),
),
);
},
);
},
);
}),
icon: Icon(Ionicons.options_outline),
iconSize: 20,
color: Colors.white,
),
),
const Gap(6),
Text(
'Filter by size',
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 14,
fontWeight: FontWeight.w700),
),
],
),
);
}
}
这是正常工作的FeedScreen 文件：
class _FeedScreenState extends State<FeedScreen> {
int index = 0;
var random = Random();
List<Color> myColors = [
Colors.white,
Colors.grey.shade900,
Colors.green,
Colors.cyan,
Colors.pink,
];
void changeColorsIndex() {
setState(() {
index = random.nextInt(4);
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: ListView(
children: [
Container(
width: size.width,
height: size.height,
color: Colors.black,
child: Column(
// this column is start of everything and container below is filter part just below app bar
children: [
Example(),
InkWell(
onTap: changeColorsIndex,
child: Container(
width: size.width,
height: 450,
color: myColors[index],
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Padding(
padding: EdgeInsets.only(top: 15, left: 15),
child: Text(
'Air Force 1 x Premium Goods',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
color: Colors.white),
),
),
Gap(5),
Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'The Sophia',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
color: Colors.white),
),
),
Gap(50),
Image(
image: AssetImage('assets/AF1xPGmain.png'),
),
],
),
),
),
],
),
)
],
),
);
}
}
我也尝试使用 GestureDecoration 甚至是同样的东西，但它不起作用
2 个解决方案
解决方案1
0 2023-02-01 13:16:43
你在过滤器文件中写了不同的 onTap 方法
改变
onTap: () {
setState(() {
changeColorsIndex();
});
},
到
onTap: changeColorsIndex,
在过滤器文件中，使用有状态构建器包装您的对话框，如此处所示
解决方案2
0 已采纳 2023-02-01 14:22:17
您可以添加一个 StatefulBuilder 小部件以使您的 showDialog 能够使用 setState 尝试一下，如果它有效请告诉我
class _ExampleState extends State<Example> {
int _selectedindex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedindex = index;
});
}
int index = 0;
var random = Random();
List<Color> myColors = [
Colors.white,
Colors.grey.shade900,
Colors.green,
Colors.cyan,
Colors.pink,
];
void changeColorsIndex() {
setState(() {
index = random.nextInt(4);
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: 40,
color: Color.fromARGB(255, 28, 28, 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 1.5),
child: IconButton(
onPressed: (() {
setState(
() {
showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
width: size.width,
height: size.height,
child: Scaffold(
backgroundColor: Colors.black,
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.only(bottom: 30),
child: Column(
children: [
Center(
child: Padding(
padding:
const EdgeInsets.only(top: 5),
child: IconButton(
onPressed: () {
Navigator.pop(
context,
MaterialPageRoute(
builder: (context) =>
TopTab(),
),
);
},
icon: const Icon(
Icons.arrow_drop_down),
iconSize: 45,
color: Colors.white,
),
),
),
const Gap(15),
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
changeColorsIndex();
});
},
child: Container(
width: 199,
height: 50,
color: myColors[index],
child: const Center(
child: Text(
'Men\'s',
style: TextStyle(
fontSize: 14,
fontWeight:
FontWeight.w600,
color: Colors.white),
),
),
),
),
],
),
),
],
),
),
),
),
),
);
});
},
);
},
);
}),
icon: Icon(Ionicons.options_outline),
iconSize: 20,
color: Colors.white,
),
),
const Gap(6),
Text(
'Filter by size',
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 14,
fontWeight: FontWeight.w700),
),
],
),
);
}
}
在 flutter 中使用手势检测器轻敲容器时更改容器颜色
[英]Changing a container color when container is tapped using gesturedetector in flutter
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.