颤抖如何在初始化状态下使用未来的异步方法 [英] flutter how to use future async method in init state
本文介绍了颤抖如何在初始化状态下使用未来的异步方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当屏幕加载时，我希望初始化状态用Future< List>填充列表.通过有状态窗口小部件传递.但是，从将来开始，我的方法将崩溃并且不起作用.
When the screen loads i want the init state to fill the List with Future<List> that is passed through the stateful widget. However since its a future, my method will crash and not work.
我的代码
@override
void initState() async {
FutureBuilder(
future: widget.imageList,
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
print('NONE');
break;
case ConnectionState.active:
case ConnectionState.waiting:
print("WAITING");
break;
case ConnectionState.done:
print("DONE");
setState(() {
imgList = widget.imageList as List<String>;
});
break;
}
},
);
super.initState();
}
产生错误
════════ Exception caught by widgets library ═══════════════════════════════════
_BottomSheetWidgetState.initState() returned a Future.
The relevant error-causing widget was
MaterialApp
状态小部件，列表通过该小部件
Stateful widget where the list is passed through
List<String> imgList = List<String>();
class BottomSheetWidget extends StatefulWidget {
BottomSheetWidget({Key key, this.name, this.imageList}) : super(key: key);
String name;
Future<List<String>> imageList;
整个编辑的代码:
List<String> imgList = List<String>();
class BottomSheetWidget extends StatefulWidget {
BottomSheetWidget({Key key, this.name, this.imageList}) : super(key: key);
String name;
Future<List<String>> imageList;
@override
_BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}
class _BottomSheetWidgetState extends State<BottomSheetWidget> {
int _current = 0;
final List<Widget> imageSliders = imgList
.map((item) => Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.network(item,
fit: BoxFit.cover, height: 1000.0, width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 0, 0)
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
),
),
],
)),
),
))
.toList();
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: widget.imageList,
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
print('NONE');
break;
case ConnectionState.active:
case ConnectionState.waiting:
print("WAITING");
break;
case ConnectionState.done:
print("DONNE");
setState(() async {
imgList = snapshot.data as List<String>;
});
return Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25),
),
height: MediaQuery.of(context).size.height * 0.85,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CarouselSlider(
items: imageSliders,
options: CarouselOptions(
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
height: MediaQuery.of(context).size.height - 500,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: imgList.map((url) {
int index = imgList.indexOf(url);
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index
? Color.fromRGBO(0, 0, 0, 0.9)
: Color.fromRGBO(0, 0, 0, 0.4),
),
);
}).toList(),
),
Text(widget.name,
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.bold)),
Text("United Kingdom",
style: TextStyle(
fontSize: 18,
color: Colors.white,
)),
],
),
)
],
),
);
break;
}
},
);
}
}
控制台出现新错误:
flutter: WAITING
════════ Exception caught by widgets library ═══════════════════════════════════
A build function returned null.
The relevant error-causing widget was
FutureBuilder<List<String>>
lib/common_widget/bottom_sheet.dart:54
════════════════════════════════════════════════════════════════════════════════
flutter: DONNE
════════ Exception caught by widgets library ═══════════════════════════════════
setState() callback argument returned a Future.
The relevant error-causing widget was
FutureBuilder<List<String>>
lib/common_widget/bottom_sheet.dart:54
════════════════════════════════════════════════════════════════════════════════
推荐答案
initState方法在设计上是同步的.您可以在覆盖的build方法中返回FutureBuilder小部件，而不是在initState方法中创建FutureBuilder小部件.随时查看FutureBuilder小部件的文档
The initState method is synchronous by design. Rather than creating the FutureBuilder widget in the initState method, you could return the FutureBuilder widget in the overridden build method. Feel free to take a look at the documentation for the FutureBuilder widget here for an example of how this could work.
setState回调函数中的代码似乎也有问题.您可能想用imgList = snapshot.data as List<String>;替换imgList = widget.imageList as List<String>;以便使用已完成的将来的数据.
It looks like there is also an issue with the code in the setState callback function. You probably want to replace imgList = widget.imageList as List<String>; with imgList = snapshot.data as List<String>; in order to use the data from the completed future.
在所有情况下，build方法似乎都不返回小部件也存在问题.我已经获取了更新的代码示例，并对其进行了如下修改:
It looks like there is also an issue with the build method not returning a widget in all the cases. I have taken your updated code sample and modified it as below:
import 'package:flutter/material.dart';
class BottomSheetWidget extends StatefulWidget {
BottomSheetWidget({Key key, this.name, this.imageList}) : super(key: key);
final String name;
final Future<List<String>> imageList;
@override
_BottomSheetWidgetState createState() => _BottomSheetWidgetState();
}
class _BottomSheetWidgetState extends State<BottomSheetWidget> {
int _current = 0;
@override
Widget build(BuildContext context) {
return FutureBuilder<List<String>>(
future: widget.imageList,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
final imgList = snapshot.data;
return Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25),
),
height: MediaQuery.of(context).size.height * 0.85,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CarouselSlider(
items: imgList.map(
(item) {
return Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.network(
item,
fit: BoxFit.cover,
height: 1000.0,
width: 1000.0,
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 0, 0)
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
),
),
],
),
),
),
);
},
).toList(),
options: CarouselOptions(
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
height: MediaQuery.of(context).size.height - 500,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: imgList.map((url) {
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == imgList.indexOf(url)
? Color.fromRGBO(0, 0, 0, 0.9)
: Color.fromRGBO(0, 0, 0, 0.4),
),
);
}).toList(),
),
Text(
widget.name,
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
"United Kingdom",
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
],
),
)
],
),
);
} else {
return CircularProgressIndicator();
}
},
);
}
}
这篇关于颤抖如何在初始化状态下使用未来的异步方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
