在这里，我试图在点击“设置折扣百分比”时显示一个对话框。
但问题是该值在外部字段中更新，而不是在 slider 上。当轻按并再次轻按以显示对话框时，将显示 slider 的正确值。如何使 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 . Dialog s 本质上是无状态的，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 中一样，但是如果您想区分对话框的状态 setter 和父窗口小部件，则可以将其更改为任何内容。
关于滑过时 flutter slider 不更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63546812/