Flutter中Img的自定义滑块

Question

当我更改滑块上的值时，我试图返回并镜像这是代码滑块

图像是我想在屏幕上显示的模板

import 'package:flutter/material.dart';
import 'package:haphy_by_aquasense/Pain/ui/widgets/text_and_img.dart';
class PainScale extends StatefulWidget {
@override
State createState() => _Painscale();
}
class _Painscale extends State<PainScale>{
double pain_value = 0.0;
String pain_text = "No me duele";
@override
Widget build(BuildContext context) {
final text_pain = Container(
height: 100,
width: 400,
margin: EdgeInsets.only(
top: 150,
right: 50,
),
child: Text(
pain_text,
),
);
final pain_scale_slider = Container(
child: Slider(
min: 0,
max: 10,
value: pain_value,
onChanged: (value) {
setState(() {
pain_value = value;
if(pain_value >= 0.0 && pain_value <= 2.0){
TextAndImgPain("Me duele", "assets/img/escala1-2.png");
}
if(pain_value >= 2.0 && pain_value <= 4.0){
TextAndImgPain("Me duele", "assets/img/escala3-4.png");
}
});
},
),
);
return Stack(
alignment: Alignment.center,
children: [
TextAndImgPain("Me duele", "assets/img/escala3-4.png"),
pain_scale_slider
],
);
}
}

这是我的代码文本和IMG

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TextAndImgPain extends StatelessWidget {
String pain_text = "Sin Dolor";
String path_img = "assets/img/escala1-2.png";
TextAndImgPain(this.pain_text, this.path_img);
@override
Widget build(BuildContext context) {
final text = Container(
margin: EdgeInsets.only(
top: 50.0,
left: 20.0
),
child: Text(
pain_text
),
);
final img = Container(
margin: EdgeInsets.only(
top: 20.0,
left: 20.0
),
width: 100.0,
height: 80.0,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
image: DecorationImage(
fit:BoxFit.cover,
image: AssetImage(path_img)
)
),
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
text,
img
],
);
}
}

这个img是屏幕，但我想在滑块的值更改时更改img

在此处输入图像描述

Answer 1

如果您想显示图像pain value是否正在更改，那么为什么不使用

onChanged: (value) {
setState(() {
pain_value = value;
if(pain_value >= 0.0 && pain_value <= 2.0){
TextAndImgPain("Me duele", "assets/img/escala1-2.png");
} else if(pain_value > 2.0 && pain_value <= 4.0){
TextAndImgPain("Me duele", "assets/img/escala3-4.png");
} else {'default value here'}
});
},

而不是这个

onChanged: (value) {
setState(() {
pain_value = value;
if(pain_value >= 0.0 && pain_value <= 2.0){
TextAndImgPain("Me duele", "assets/img/escala1-2.png");
}
if(pain_value >= 2.0 && pain_value <= 4.0){
TextAndImgPain("Me duele", "assets/img/escala3-4.png");
}
});
},