flutter - 如何更新内置于 FutureBuilder 中的小部件状态
问题描述
以前,我曾经ListBuilder
生成一个包含 70 个数字的列表并且它可以工作,但是将 70 个数字生成到自定义小部件中需要很长时间,而且当我点击一个数字只是为了更改背景颜色状态时,之前需要几毫秒正在改变的状态。
现在我正在使用 aFutureBuilder
来加载屏幕,同时等待生成的 70 个整数。但是当我点击球号时,背景颜色没有更新......就像setState()
在 Future ListBuilder 中不起作用一样。
这个问题:“ Flutter - How to update state (or value?) of a Future/List used to build ListView (via FutureBuilder) ”非常相似,但它没有解决我的问题。
这是我在构建方法中的代码
Flexible(
child:FutureBuilder<List<Widget>>(
future: ballNumbers,
builder: (context, snapshot){
if(snapshot.connectionState != ConnectionState.done){
return Center(child: CircularProgressIndicator());
}
if(snapshot.hasError){
return Center(child: Text("An error has occured"));
}
List<Widget> balls = snapshot.data ?? [];
return GridView.count(
crossAxisCount: 9,
children: balls,
);
}
)
以下是我启动函数状态的方式:
Future<List<Widget>> ballNumbers;
List<int> picks = [];
@override
void initState() {
ballNumbers = getBallNumbers();
});
Future<List<Widget>> getBallNumbers() async {
return List.generate(limitBallNumber,(number){
number = number + 1;
return Padding(
padding:EdgeInsets.all(2.5),
child:Ball(
number : number,
size: ballWidth,
textColor:(picks.contains(number)) ? Colors.black : Colors.white,
ballColor: (picks.contains(number)) ? Style.selectedBallColor : Style.ballColor,
onTap:(){
setState((){
picks.contains(number) ? picks.remove(number) : picks.add(number);
});
}
)
);
});
}
更新:这是Ball
小部件的类
class Ball extends StatelessWidget {
final Color ballColor;
final Color textColor;
final double size;
final double fontSize;
final int number;
final VoidCallback onTap;
Ball({Key key, @required this.number,
this.textColor,
this.ballColor,
this.onTap,
this.size = 55.0,
this.fontSize = 14,
}) : super(key : key);
@override
Widget build(BuildContext context) {
return Container(
height: size,
width: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
Style.secondaryColor,
ballColor != null ? ballColor : Style.ballColor,
],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: FlatButton(
padding: EdgeInsets.all(0),
child: Container(
child: Text(
number.toString().length > 1 ? number.toString() : "0" + number.toString(),
style: TextStyle(
fontSize: fontSize,
color: textColor != null ? textColor : Colors.white
),
),
padding: const EdgeInsets.all(4.0),
decoration:BoxDecoration(
color: Colors.transparent,
border: Border.all(color: textColor != null ? textColor : Colors.white, width: 1),
borderRadius: BorderRadius.circular(32),
)
),
color: Colors.transparent,
onPressed: onTap,
),
);
}
}
解决方案
问题是getBallNumbers
它只在 中被调用一次initState
,所以何时picks
更新并不重要,因为getBallNumbers
不会再次调用它来更新传递给Ball
小部件的颜色。
一个简单的解决方法是调用getBallNumbers
你的build
with future: getBallNumbers()
,但这会导致CircularProgressIndicator
在每次点击时显示为List
重新生成。
但是,理想情况下,您应该处理每个状态内的所有颜色变化,Ball
这样您就不会被迫List
在每次点击时重建它。并且要在父小部件的 中维护一个List
选定的数字State
,您应该向每个球传递一个回调,以从父小部件中添加和删除它们的数字List
。
粗略的例子:
球类(修改为有状态并删除了不必要的参数;活动状态现在存储在球中,而不是仅存储在父级中):
class Ball extends StatefulWidget {
final double size;
final double fontSize;
final int number;
final VoidCallback toggleBall;
final bool initialActiveState;
Ball({Key key, @required this.number,
this.toggleBall,
this.size = 55.0,
this.fontSize = 14,
this.initialActiveState,
}) : super(key : key);
_BallState createState() => _BallState();
}
class _BallState extends State<Ball> {
bool isActive;
@override
void initState() {
super.initState();
isActive = widget.initialActiveState;
}
@override
Widget build(BuildContext context) {
return Container(
height: widget.size,
width: widget.size,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
Style.secondaryColor,
isActive ? Style.selectedBallColor : Style.ballColor,
],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: FlatButton(
padding: EdgeInsets.all(0),
child: Container(
child: Text(
widget.number.toString().length > 1 ? widget.number.toString() : "0" + widget.number.toString(),
style: TextStyle(
fontSize: widget.fontSize,
color: isActive ? Colors.black : Colors.white,
),
),
padding: const EdgeInsets.all(4.0),
decoration:BoxDecoration(
color: Colors.transparent,
border: Border.all(color: isActive ? Colors.black : Colors.white, width: 1),
borderRadius: BorderRadius.circular(32),
)
),
color: Colors.transparent,
onPressed: () {
if(!isActive && widget.activeBallList.length >= 7) {
return;
}
setState(() {
isActive = !isActive;
});
widget.activeBallList.contains(widget.number) ? widget.activeBallList.remove(widget.number) : widget.activeBallList.add(widget.number);
},
),
);
}
}
父类(唯一需要修改的是 的参数Ball
):
Future<List<Widget>> getBallNumbers() async {
return List.generate(limitBallNumber,(number){
number = number + 1;
return Padding(
padding:EdgeInsets.all(2.5),
child: Ball(
number: number,
size: ballWidth,
initialActiveState: picks.contains(number),
activeBallList: picks,
)
);
});
}