[英]Flutter future builder to list
我在理解未来的构建器如何在颤振中工作时遇到了一些麻烦。 我想从我未来的电话中传递一个字符串列表,我想在 SingleChildScrollView 中显示它们。
问题是当我访问snapshot.data
时,我无法访问列表的元素。 因为在我的 SingleChildScrollView 中我有容器,并且在每个容器中我想从列表中显示一个字符串。
这是我检索数据的 Future getData 方法。
Future<List<String>> getData () async {
List<String> data = [];
data.add("A");
data.add("B");
data.add("C");
// DEBUG
await Future.delayed(const Duration(seconds: 2), (){});
return data;
}
这是我未来的构建器,我想在其中显示每个容器中的数据。 在加载中,我添加了微光效果。
FutureBuilder(
builder: (context, snapshot) {
List<Widget> children;
if (snapshot.hasData) {
children = <Widget>[
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
Container(
margin: EdgeInsets.only(left: 5.w),
width: 40.w,
height: 20.h,
decoration: BoxDecoration(
color: green400,
borderRadius: BorderRadius.all(Radius.circular(5.w)),
),
),
Container(
margin: EdgeInsets.only(left: 5.w),
width: 40.w,
height: 20.h,
decoration: BoxDecoration(
color: green400,
borderRadius: BorderRadius.all(Radius.circular(5.w)),
),
),
Container(
margin: EdgeInsets.only(left: 5.w),
width: 40.w,
height: 20.h,
decoration: BoxDecoration(
color: green400,
borderRadius: BorderRadius.all(Radius.circular(5.w)),
),
),
],
),
),
];
} else if (snapshot.hasError) {
children = <Widget>[
const Icon(
Icons.error_outline,
color: Colors.red,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Error: ${snapshot.error}'),
)
];
} else {
children = <Widget>[
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
Shimmer.fromColors(
baseColor: Colors.grey.shade200,
highlightColor: Colors.grey.shade300,
child: Container(
margin: EdgeInsets.only(left: 5.w),
width: 40.w,
height: 20.h,
decoration: BoxDecoration(
color: green400,
borderRadius: BorderRadius.all(Radius.circular(5.w)),
),
),
),
Shimmer.fromColors(
baseColor: Colors.grey.shade200,
highlightColor: Colors.grey.shade300,
child: Container(
margin: EdgeInsets.only(left: 5.w),
width: 40.w,
height: 20.h,
decoration: BoxDecoration(
color: green400,
borderRadius: BorderRadius.all(Radius.circular(5.w)),
),
),
),
Shimmer.fromColors(
baseColor: Colors.grey.shade200,
highlightColor: Colors.grey.shade300,
child: Container(
margin: EdgeInsets.only(left: 5.w),
width: 40.w,
height: 20.h,
decoration: BoxDecoration(
color: green400,
borderRadius: BorderRadius.all(Radius.circular(5.w)),
),
),
),
],
),
),
];
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
);
},
future: getData(),
),
所以通过这种方式我可以访问我的字符串列表的元素吗?
当您声明FutureBuilder
时,您还必须传递它的数据类型。 在这种情况下,它将是:
FutureBuilder<List<String>>(
future: getData(),
builder: (context,snapshot){
return ...;
}
)
如果您不声明其数据类型,您的snapshot
将被视为AsyncDataSnapshot<dynamic>
而不是AsyncDataSnapshot<List<String>>
。
正如@piskink 提到的,使用ListView.builder
更有效。
body: FutureBuilder<List<String>?>(
future: getData(),
builder: (context, snapshot) {
if (snapshot.hasData &&
snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return Text(snapshot.data?[index] ?? "got null");
},
);
}
/// handles others as you did on question
else {
return CircularProgressIndicator();
}
},
如果您仍然希望使用SingleChildScrollView
,您可以生成类似的项目
return Column(
children: List.generate(
snapshot.data!.length,
(index) => Text(snapshot.data?[index] ?? "got null"),
),
);
查看更多关于async-await和Future的信息。
如果您遇到这些错误:
(没有为“对象”类型定义吸气剂“长度”。)
(运算符 '[]' 没有为类型 'Object' 定义。)
这是修复↓↓↓↓↓
您必须选择将要接收的未来数据的数据类型。
import 'package:flutter/material.dart';
class FutureExample extends StatelessWidget {
const FutureExample({Key? key}) : super(key: key);
Future<List<String>> getData() async{
await Future.delayed(
const Duration(seconds:2)
);
return ["I'm Ramy","I'm Yasser", "I'm Ahmed", "I'm Yossif",];
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<List<String>>(
future: getData(),
builder: (context, snapshot) {
return snapshot.connectionState == ConnectionState.waiting
? const CircularProgressIndicator()
: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: List.generate(snapshot.data!.length,
(index) {
return Text(snapshot.data?[index] ?? "null") ;
},
),
);
},
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.