问题：
“在颤振贴图中”功能在“列”窗口小部件中不起作用
羿宏硕
我正在尝试在列小部件中动态创建行小部件。我是个新手，我已经尽力了，但还是没能解决这个问题。我想请你在这个问题上帮助我。我添加了所有我尝试过的东西。多谢各位
我的Json
{
"status": true,
"data": {
"id": 1,
"image": "https://img.taste.com.au/fruCLEZM/taste/2019/08/chicken-karahi-153167-2.jpg",
"calories": 100,
"ingredients_count": 5,
"serve": 1,
"views": 1,
"time": 1,
"translate": {
"post_title": "Chicken Karahi",
"post_description": "spicy and tasteful chicken karahi."
},
"ingredients": [
{
"name": "yogurt",
"quantity": "1 cup",
"image": "https://www.archanaskitchen.com/images/archanaskitchen/BasicRecipes_HOW_TO/How_To_Make_Fresh_Homemade_Yogurt_Curd_400.jpg"
},
{
"name": "red chilli",
"quantity": "100 gram",
"image": "https://ik.imagekit.io/91ubcvvnh3k/tr:w-500/https://www.planetorganic.com//images/products/medium/26148.jpg"
}
]
}
}
参考图像
我面临两个错误，如下所示：，
Another exception was thrown: type '(dynamic) => dynamic' is not a subtype of type '(Ingredient) => Widget' of 'f'
和
type 'Container' is not a subtype of type 'List<Widget>'
在全班同学中，我有以下几点
var posts;
bool _load = false;
void initState() {
super.initState();
getRecipeById().then((value) => {
setState((){
posts = value;
})
});
}
通过这种方法，我从api获取数据
getRecipeById() async {
String url = 'http://www.xxxxx.com/xxxxx/in.php';
Map<String, String> requestHeaders = {
'Content-type': 'application/json',
'Accept': '*/*',
};
final json = {
"by_post_id": 'yes',
"post_id":'${widget.postId}'
};
http.Response response = await http.post(url, body: json);
if(response.statusCode == 200){
setState(() {
_load = true;
});
}
var jsonResponse = jsonDecode(response.body);
posts = RecipeModel.fromJson(jsonResponse['data']);
return posts;
}
下面是我的构建小部件
Widget build(BuildContext context) {
final ingredientsList = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 1.0, right: 25.0),
margin: const EdgeInsets.only(bottom: 20.0),
child: Container(
child: Column(
children: (_load == false) ? Container(child:Text("loading..")) : posts.ingredients.map<Widget>((data) =>
ingredientsRow(data.name, data.quantity, data.image)
).toList(),
),
),
);
return SafeArea(
top: true,
child: Scaffold(
body: Directionality(
textDirection: TextDirection.ltr,
child: SingleChildScrollView(
child: (_load == false) ? Container(
alignment: Alignment.center,
child: Text("loading now..")
) :
Column(
children: <Widget>[
ingredientsList,
],
),
),
),
)
);
}
下面是我想在地图中使用的函数
ingredientsRow(name, quantity, image)
{
return Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
flex: 2, // 20%
child: Container(
alignment: Alignment.center,
child: Image.network(image,
height: 45,
)
),
),
Expanded(
flex: 4, // 60%
child: Container(
child:Text(
name,
style: TextStyle(
color: Color(0xff41453c),
fontSize: 15,
fontWeight: FontWeight.w400
),
)
),
),
Expanded(
flex: 4, // 20%
child: Container(
alignment: Alignment.center,
child:Text(
quantity,
style: TextStyle(
color: Color(0xff41453c),
fontSize: 15,
fontWeight: FontWeight.w400
),
)
),
)
],
);
}
这是我的数据模型课
class RecipeModel{
final int id;
final String image;
final List<Ingredient> ingredients;
RecipeModel({this.id, this.image, this.ingredients});
factory RecipeModel.fromJson(Map<String, dynamic> parsedJson){
var list = parsedJson['ingredients'] as List;
print(list.runtimeType);
List<Ingredient> ingredientsList = list.map((i) => Ingredient.fromJson(i)).toList();
return RecipeModel(
id: parsedJson['id'],
image: parsedJson['image'],
ingredients: ingredientsList
);
}
}
class Ingredient {
final String name;
final String quantity;
final String image;
Ingredient({this.name, this.quantity, this.image});
factory Ingredient.fromJson(Map<String, dynamic> parsedJson){
return Ingredient(
name:parsedJson['name'],
quantity:parsedJson['quantity'],
image:parsedJson['image']
);
}
}
共有1个答案
曾嘉荣
最好的方法是使用FutureBuilder。
我检查了你的代码，主要改变了4件事：
1-我使用了FutureBuilder的方法，它就是为此目的而构建的。
2-删除了ingredientsList变量，并将其代码移动到名为_buildingRedientsList的函数中，返回类型为Widget。
3-删除bool变量，因为不再需要使用FutureBuilder。
4-将返回类型“Widget”添加到IngreditsRow函数中，因为否则它将抛出类型错误。
查看下面的代码：
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:stackoverflowsamples/models.dart';
void main() => runApp(
MaterialApp(home: HomePage(),
theme: ThemeData.fallback(),
),
);
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var posts;
///3 - Remove bool
void initState() {
super.initState();
getRecipeById().then((value) => {
setState((){
posts = value;
})
});
}
Widget build(BuildContext context) {
return SafeArea(
top: true,
child: Scaffold(
body: Directionality(
textDirection: TextDirection.ltr,
child: SingleChildScrollView(
child:
FutureBuilder( ///1
future: getRecipeById(),
builder: (context, snapshot) {
if(snapshot.connectionState == ConnectionState.done) {
return Column(
children: <Widget>[
_buildIngredientList(),
],
);
} else {
return Container(
alignment: Alignment.center,
child: Text("loading now..")
);
}
}
),
),
),
)
);
}
Widget _buildIngredientList() { ///2
return Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left: 1.0, right: 25.0),
margin: const EdgeInsets.only(bottom: 20.0),
child: Container(
child: Column(
children: posts.ingredients.map<Widget>((data) =>
ingredientsRow(data.name, data.quantity, data.image)
).toList(),
),
),
);
}
///4
Widget ingredientsRow(name, quantity, image) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
flex: 2, // 20%
child: Container(
alignment: Alignment.center,
child: Image.network(image,
height: 45,
)
),
),
Expanded(
flex: 4, // 60%
child: Container(
child:Text(
name,
style: TextStyle(
color: Color(0xff41453c),
fontSize: 15,
fontWeight: FontWeight.w400
),
)
),
),
Expanded(
flex: 4, // 20%
child: Container(
alignment: Alignment.center,
child:Text(
quantity,
style: TextStyle(
color: Color(0xff41453c),
fontSize: 15,
fontWeight: FontWeight.w400
),
)
),
)
],
);
}
getRecipeById() async {
///I've pasted the json as literal here because otherwise I couldn't make it run on my side.
var jsonResponse = jsonDecode('''{
"status": true,
"data": {
"id": 1,
"image": "https://img.taste.com.au/fruCLEZM/taste/2019/08/chicken-karahi-153167-2.jpg",
"calories": 100,
"ingredients_count": 5,
"serve": 1,
"views": 1,
"time": 1,
"translate": {
"post_title": "Chicken Karahi",
"post_description": "spicy and tasteful chicken karahi."
},
"ingredients": [
{
"name": "yogurt",
"quantity": "1 cup",
"image": "https://www.archanaskitchen.com/images/archanaskitchen/BasicRecipes_HOW_TO/How_To_Make_Fresh_Homemade_Yogurt_Curd_400.jpg"
},
{
"name": "red chilli",
"quantity": "100 gram",
"image": "https://ik.imagekit.io/91ubcvvnh3k/tr:w-500/https://www.planetorganic.com//images/products/medium/26148.jpg"
}
]
}
}''');
posts = RecipeModel.fromJson(jsonResponse['data']);
return posts;
}
}
类似资料：
-
我正在尝试使用mapbox创建多段线贴图，我能够正确地创建它。用户可以返回并在其配置文件中查看多段线地图。 疑问-是否有任何方法可以将我的lat long列表转换为某种格式并存储在db中，然后从db中获取并渲染贴图？ 我也检查了geojson格式，但如果我们将geojson与mapbox一起使用，它将生成静态映射。 我使用flutter_map生成地图。 更新- 目前我正在使用flutter_ma
-
我很熟悉flutter中的无状态和有状态小部件，但我很好奇为什么我们不将有状态小部件定义为无状态小部件？为什么我们需要声明两个不同的类，一个用于createstate方法，一个用于实际的状态实现？
-
我试图在火花数据帧中使用rowNumber。我的查询在Spark shell中按预期工作。但是当我在eclipse中写出它们并编译一个jar时，我面临着一个错误 我的问题 在Spark shell中运行查询时，我没有使用HiveContext。不确定为什么它返回一个错误，当我运行相同的jar文件。如果有帮助的话，我也在Spark 1.6.0上运行脚本。有人面临类似的问题吗？
-
问题内容： 我已经使用Spark建立了Word2Vec模型并将其另存为模型。现在，我想在另一个代码中将其用作脱机模型。我已经加载了模型，并用它来表示单词的向量（例如，Hello），并且效果很好。但是，我需要使用map在RDD中为许多单词调用它。 当我在地图函数中调用model.transform（）时，它将引发以下错误： “似乎您正在尝试从广播引用SparkContext。”异常：您似乎正在尝试从
-
我在一个堆栈中有小部件，所以我想将我的按钮栏放在堆栈的底部中心，但什么都不起作用。小部件只是粘在左边。这是我的密码。 我已经试过了所有的中心对齐，请帮忙
-
目前，我正在尝试做一个插件，将第三方原生SDK与Flatter集成，我对Swift并不太熟悉。 在第三方SDK中，有一行代码需要实现： 当我试图运行时，出现了一个错误，在范围中找不到“present”。 我尝试使用，但仍然不起作用。