我有一个WordPress的博客,我试图为这个博客创建一个应用程序。在使用博客的API时,我无法找到正确的代码集来获取博客之间的图像,我已经获取了博客的特色图像,但问题是获取段落文本之间的图像。现在,我得到的是这样的文本而不是图像。截图附后。
其次,在获取文本的同时,我得到的标签沿着文本,所以我如何才能删除这些标签。截图附后。
下面是我的代码,我用它来获取所有这些:
import 'package:flutter/material.dart';
import 'package:thewritingparadigm/screens/post_details.dart';
import 'package:thewritingparadigm/service/post_data.dart';
class LatestPost extends StatefulWidget {
const LatestPost({Key? key}) : super(key: key);
@override
State<LatestPost> createState() => _LatestPostState();
}
class _LatestPostState extends State<LatestPost> {
Post postService = Post();
@override
Widget build(BuildContext context) {
return FutureBuilder<List>(
future: postService.getAllPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
if (snapshot.data!.isEmpty) {
return const Center(child: Text("No Post Available"));
}
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data?.length,
itemBuilder: (context, i) {
return Card(
child: ListTile(
title: Column(
children: [
const SizedBox(
height: 20.0,
),
SizedBox(
width: double.infinity,
height: 250.0,
child: Image.network(snapshot.data![i]["_embedded"]
!["wp:featuredmedia"][0]["source_url"]),
),
const SizedBox(
height: 15.0,
),
Text(
snapshot.data![i]['title']['rendered'],
style: const TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold,
),
),
],
),
subtitle: Container(
padding: const EdgeInsets.only(
left: 5.0, right: 5.0, bottom: 25.0),
child: Text(
snapshot.data![i]['content']['rendered']
.toString()
.replaceAll("<p>", "")
.replaceAll("</p>", ""),
maxLines: 4,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontSize: 16.0),
),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PostDetails(data: snapshot.data?[i]),
),
);
},
),
);
});
} else if (snapshot.hasError) {
return Center(
child: Text(snapshot.error.toString()),
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
}
5条答案
按热度按时间snz8szmq1#
您从API中获得的是已经预呈现的html内容。您在第一个屏幕截图中发布的代码是HTML代码,您可以在任何
.html
文件中运行它。你需要的是把图像从里面剥离出来。会建议第一件事是尝试获得另一个WordPress API如果可能的话,返回与特定职位相关的图像。
如果您无法执行此操作,请尝试以下操作:
split()
方法。http://thewriting.../uploads/
。上面给予了一个List<String>
,每个元素都以/uploads/
之后的开始,以someImageUrl.jpg somenumber.w
结束。forEach()
循环,在其中迭代每个元素,然后使用.split()
并使用模式".jpg"
。它会给予你一个两个字符串的列表,第一个元素是你想要的url,第二个元素是你不需要的rubish。[0]
条目。.jpg
连接起来。你就得到了路径数组。上面的代码应该会得到一个
List<String>
,其中包含响应中的所有图像。vohkndzv2#
使用此库
tap here
tkclm6bt3#
您可以将HTML块转换为JSON,如下所示:
它返回一个JSON,并用数组封装它。对于您的特定示例,jsonDecode应该可以正常工作,只需取数组的索引0来访问json。
c90pui9n4#
你有没有试过Flutter dev食谱,它可以帮助你分配
访问https://docs.flutter.dev/cookbook/networking/fetch-data
nzk0hqpo5#
只需在pubspec中更新环境变量就可以解决这个问题。yaml它应该看起来像这样:环境:sdk:'〉=2.12。0〈3.0.0'
另一个解决方案是删除!ofwww.example. www.example.com ![i]['title']['render'],但这不是最佳的解决方案。我建议你更新pubspect。亚姆勒