Flutter 滑动通过时颤振滑块未更新
在这里，当点击“设置折扣百分比”时，我试图显示一个对话框。 但问题是，该值在外部字段中更新，而不是在滑块上更新。当点击并再次点击以显示对话框时，将显示滑块的正确值。如何使滑块在对话框容器内滑动时显示值Flutter 滑动通过时颤振滑块未更新,flutter,dart,Flutter,Dart,在这里，当点击“设置折扣百分比”时，我试图显示一个对话框。 但问题是，该值在外部字段中更新，而不是在滑块上更新。当点击并再次点击以显示对话框时，将显示滑块的正确值。如何使滑块在对话框容器内滑动时显示值 Container( padding: EdgeInsets.only(top: 5), width: 280, child:
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
实际上是父窗口小部件的setState
您需要使用StatefulBuilder
在setState
调用中包装所有需要重建的内容。这似乎是滑块正上方的行
，因为它包含需要更新的百分比
变量的所有实例
。。。
StatefulBuilder（builder:（context，setState）{//只需将行包装在StatefulBuilder中，其他所有内容都可以保持不变
返回行(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
////////////////////////////////////滑块！！！！！！！
容器(
宽度：240，
孩子：幻灯片主题(
数据：SliderTheme.of（context）.copyWith(
activeTrackColor:Colors.red[700]，
颜色：颜色。红色[100]，
trackShape:RoundedRectSliderTrackShape（），
轨道高度：2.0，
拇指形状：圆形滑块拇指形状（启用拇指半径：12.0），
thumbColor:Colors.redAccent，
覆盖颜色：颜色。红色。带有Alpha（32），
覆盖形状：圆形滑块覆盖形状（覆盖半径：28.0），
tickMarkShape:RoundSliderTickMarkShape（），
activeTickMarkColor:Colors.red[700]，
InactivatickmarkColor:Colors.red[100]，
ValueIndicator形状：桨叶滑块ValueIndicator形状（），
ValueIndicator颜色：Colors.redAccent，
valueIndicatorTextStyle:TextStyle(
颜色：颜色，白色，
),
),
子：滑块(
分:0,，
最高：20，
分区：80，
值：百分比，
标签：“$percent”，
//activeColor:Color（0xFFFFAE40），
//不活动颜色：颜色。黑色，
一旦更改：（newValue）{
设置状态（）{
百分比=新值；
});
//Dialog（）；应删除此行。它不起任何作用。
},
),
),
),
容器(
身高：30，
宽度：70，
填充：仅限边缘设置（左：10，右：8），
页边距：仅限边集（右：10），
颜色：颜色（0xFF707070），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
正文(
“$百分比”，
样式：TextStyle（颜色：颜色（0xFFE0E0）），
),
正文(
'%',
样式：TextStyle（颜色：颜色（0xFFE0E0）），
),
],
),
)
],
);
});
...
我在这里创建的StateSetter
回调名为setState
，就像在普通的StatefulWidget
中一样，但是如果您想区分对话框的状态设置器和父窗口小部件，可以将其更改为任何内容。要在对话框中执行setState
，您需要<代码>对话框本质上是无状态的，您当前调用的setState
实际上是父窗口小部件的setState
您需要使用StatefulBuilder
在setState
调用中包装所有需要重建的内容。这似乎是滑块正上方的行
，因为它包含需要更新的百分比
变量的所有实例
。。。
StatefulBuilder（builder:（context，setState）{//只需将行包装在StatefulBuilder中，其他所有内容都可以保持不变
返回行(
mainAxisAlignment:mainAxisAlignment.space，
儿童：[
////////////////////////////////////滑块！！！！！！！
容器(
宽度：240，
孩子：幻灯片主题(
数据：SliderTheme.of（context）.copyWith(
activeTrackColor:Colors.red[700]，
颜色：颜色。红色[100]，
trackShape:RoundedRectSliderTrackShape（），
轨道高度：2.0，
拇指形状：圆形滑块拇指形状（启用拇指半径：12.0），
thumbColor:Colors.redAccent，
覆盖颜色：颜色。红色。带有Alpha（32），
覆盖形状：圆形滑块覆盖形状（覆盖半径：28.0），
tickMarkShape:RoundSliderTickMarkShape（），
activeTickMarkColor:Colors.red[700]，
InactivatickmarkColor:Colors.red[100]，
ValueIndicator形状：桨叶滑块ValueIndicator形状（），
ValueIndicator颜色：Colors.redAccent，
valueIndicatorTextStyle:TextStyle(
颜色：颜色，白色，
),
),
子：滑块(
分:0,，
最高：20，
分区：80，
值：百分比，
标签：“$percent”，
//activeColor:Color（0xFFFFAE40），
//不活动颜色：颜色。黑色，
一旦更改：（newValue）{
设置状态（）{
百分比=新值；
});
//Dialog（）；应删除此行。它不起任何作用。
},
),
),
),
容器(
身高：30，
宽度：70，
填充：仅限边缘设置（左：10，右：8），
页边距：仅限边集（右：10），
颜色：颜色（0xFF707070），
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
儿童：[
正文(
“$百分比”，