Flutter Slider滑过时不更新

亚当·西尔弗

点击“设置折扣百分比”时，我试图显示一个对话框。但是问题在于该值会在外部字段中而不是在滑块上更新。轻按并再次轻按以显示对话框时，将显示滑块的正确值。在对话框容器中滑动时如何使滑块显示值。

                    Container(
                      padding: EdgeInsets.only(top: 5),
                      width: 280,
                      child: FlatButton(
                          onPressed: () {
                            showDialog(
                              context: context,
                              builder: (context) {
                                return Dialog(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(40)),
                                  elevation: 16,
                                  child: Container(
                                      height: 180.0,
                                      width: 380.0,
                                      child: Center(
                                          child: ListView(
                                        children: [
                                          Container(
                                            padding: EdgeInsets.fromLTRB(
                                                20, 20, 40, 10),
                                            child: Text(
                                              'Discount',
                                              style: TextStyle(
                                                  fontSize: 23,
                                                  color: Color(0xFF707070)),
                                            ),
                                          ),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceEvenly,
                                            children: [
                                              ////////////////////////////////////Slider!!!!!!!
                                              Container(
                                                width: 240,
                                                child: SliderTheme(
                                                  data: SliderTheme.of(context)
                                                      .copyWith(
                                                    activeTrackColor:
                                                        Colors.red[700],
                                                    inactiveTrackColor:
                                                        Colors.red[100],
                                                    trackShape:
                                                        RoundedRectSliderTrackShape(),
                                                    trackHeight: 2.0,
                                                    thumbShape:
                                                        RoundSliderThumbShape(
                                                            enabledThumbRadius:
                                                                12.0),
                                                    thumbColor:
                                                        Colors.redAccent,
                                                    overlayColor: Colors.red
                                                        .withAlpha(32),
                                                    overlayShape:
                                                        RoundSliderOverlayShape(
                                                            overlayRadius:
                                                                28.0),
                                                    tickMarkShape:
                                                        RoundSliderTickMarkShape(),
                                                    activeTickMarkColor:
                                                        Colors.red[700],
                                                    inactiveTickMarkColor:
                                                        Colors.red[100],
                                                    valueIndicatorShape:
                                                        PaddleSliderValueIndicatorShape(),
                                                    valueIndicatorColor:
                                                        Colors.redAccent,
                                                    valueIndicatorTextStyle:
                                                        TextStyle(
                                                      color: Colors.white,
                                                    ),
                                                  ),
                                                  child: Slider(
                                                    min: 0,
                                                    max: 20,
                                                    divisions: 80,
                                                    value: percent,
                                                    label: '$percent',
                                                    //activeColor: Color(0xFFFFAE40),
                                                    //inactiveColor: Colors.black,
                                                    onChanged: (newValue) {
                                                      setState(() {
                                                        percent = newValue;
                                                      });
                                                      Dialog();
                                                    },
                                                  ),
                                                ),
                                              ),
                                              Container(
                                                  height: 30,
                                                  width: 70,
                                                  padding: EdgeInsets.only(
                                                      left: 10, right: 8),
                                                  margin: EdgeInsets.only(
                                                      right: 10),
                                                  color: Color(0xFF707070),
                                                  child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .spaceBetween,
                                                    children: [
                                                      Text(
                                                        '$percent',
                                                        style: TextStyle(
                                                            color: Color(
                                                                0xFFE0E0E0)),
                                                      ),
                                                      Text(
                                                        '%',
                                                        style: TextStyle(
                                                            color: Color(
                                                                0xFFE0E0E0)),
                                                      ),
                                                    ],
                                                  ))
                                            ],
                                          ),
                                          Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              Container(
                                                width: 60,
                                                child: FlatButton(
                                                  onPressed: () {},
                                                  textColor: Color(0xFF707070),
                                                  child: Text('BACK'),
                                                ),
                                              ),
                                              FlatButton(
                                                onPressed: () {},
                                                textColor: Color(0xFFFFAE40),
                                                child: Text('ADD DISCOUNT'),
                                              ),
                                            ],
                                          )
                                        ],
                                      ))),
                                );
                              },
                            );
                          },
                          textColor: Colors.white,
                          child: AutoSizeText(
                            'Set Discount Percentage',
                            style: TextStyle(
                              fontSize: 22,
                              fontWeight: FontWeight.w400,
                            ),
                            maxLines: 1,
                          )),
                    ),

克里斯托弗·摩尔

要setState在内完成任务Dialog，您需要StatefulBuilder。Dialogs本质上是无状态的，setState您当前正在调用的实际上setState是父窗口小部件的。

你需要用的一切，需要在您的重建setState与调用StatefulBuilder。这似乎位于的Row正上方，Slider因为它包含percent需要更新的变量的所有实例。

...
StatefulBuilder(builder: (context, setState) {//Just wrap the Row in StatefulBuilder, everthing else can stay the same
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      ////////////////////////////////////Slider!!!!!!!
      Container(
        width: 240,
        child: SliderTheme(
          data: SliderTheme.of(context).copyWith(
            activeTrackColor: Colors.red[700],
            inactiveTrackColor: Colors.red[100],
            trackShape: RoundedRectSliderTrackShape(),
            trackHeight: 2.0,
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
            thumbColor: Colors.redAccent,
            overlayColor: Colors.red.withAlpha(32),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
            tickMarkShape: RoundSliderTickMarkShape(),
            activeTickMarkColor: Colors.red[700],
            inactiveTickMarkColor: Colors.red[100],
            valueIndicatorShape: PaddleSliderValueIndicatorShape(),
            valueIndicatorColor: Colors.redAccent,
            valueIndicatorTextStyle: TextStyle(
              color: Colors.white,
            ),
          ),
          child: Slider(
            min: 0,
            max: 20,
            divisions: 80,
            value: percent,
            label: '$percent',
            //activeColor: Color(0xFFFFAE40),
            //inactiveColor: Colors.black,
            onChanged: (newValue) {
              setState(() {
                percent = newValue;
              });
              //Dialog(); This line should be removed. It does nothing.
            },
          ),
        ),
      ),
      Container(
        height: 30,
        width: 70,
        padding: EdgeInsets.only(left: 10, right: 8),
        margin: EdgeInsets.only(right: 10),
        color: Color(0xFF707070),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '$percent',
              style: TextStyle(color: Color(0xFFE0E0E0)),
            ),
            Text(
              '%',
              style: TextStyle(color: Color(0xFFE0E0E0)),
            ),
          ],
        ),
      )
    ],
  );
});
...

StateSetter我在这里创建的回调被命名为setState，就像在正常情况下一样StatefulWidget，但是如果您想区分对话框的状态设置器和父窗口小部件，则可以将其更改为任何名称。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。