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

这是我的代码 textandIMG

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