我正在为新博客创建一个应用程序，该应用程序托管在blogger.com上。我已经将帖子与图像一起显示在应用程序中，但是由于某种原因，我无法对帖子中的文本进行格式化。它只是将它们 bundle 在一起。
在博客和应用中的外观如下:
如何在我的代码中设置格式，使其看起来像在博客中一样？
这是我在main.dart文件中使用的代码:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:html/parser.dart';
import 'pages/post_view.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _isLoading = true; //For progress bar
var posts;
var imgUrl;
//initialization
void initState() {
super.initState();
_fetchData();
}
//Function to fetch data from JSON
@override
_fetchData() async {
print("attempting");
final url =
"https://www.googleapis.com/blogger/v3/blogs/8902712678213444829/posts/?key=AIzaSyDpwI-kMZ_IxqAJVBKAVtWLOlaGQ5YLEuw";
final response = await http.get(url);
print(response.body);
if (response.statusCode == 200) {
//HTTP OK is 200
final Map items = json.decode(response.body);
var post = items['items'];
setState(() {
_isLoading = false;
this.posts = post;
});
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Blogger"),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.refresh),
onPressed: () {
setState(() {
_isLoading = true;
});
_fetchData();
})
],
),
body: new Center(
child: _isLoading
? new CircularProgressIndicator()
: new ListView.builder(
itemCount: this.posts != null ? this.posts.length : 0,
itemBuilder: (context, i) {
final post = this.posts[i];
final postDesc = post["content"];
//All the below code is to fetch the image
var document = parse(postDesc);
//Regular expression
RegExp regExp = new RegExp(
r"(https?:\/\/.*\.(?:png|jpg|gif))",
caseSensitive: false,
multiLine: false,
);
final match = regExp
.stringMatch(document.outerHtml.toString())
.toString();
//print(document.outerHtml);
//print("firstMatch : " + match);
//Converting the regex output to image (Slashing) , since the output from regex was not perfect for me
if (match.length > 5) {
if (match.contains(".jpg")) {
imgUrl = match.substring(0, match.indexOf(".jpg"));
print(imgUrl);
} else {
imgUrl =
"https://www.googleapis.com/blogger/v3/blogs/8902712678213444829/posts/?key=AIzaSyDpwI-kMZ_IxqAJVBKAVtWLOlaGQ5YLEuw";
}
}
String description = document.body.text.trim();
//print(description);
return new Container(
padding:
const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
width: 500.0,
height: 180.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
image: new DecorationImage(
fit: BoxFit.fitHeight,
//check if the image is not null (length > 5) only then check imgUrl else display default img
image: new NetworkImage(imgUrl
.toString()
.length >
10
? imgUrl.toString()
: "https://www.googleapis.com/blogger/v3/blogs/8902712678213444829/posts/?key=AIzaSyDpwI-kMZ_IxqAJVBKAVtWLOlaGQ5YLEuw")),
),
),
new Padding(
padding:
const EdgeInsets.symmetric(vertical: 10.0),
child: new Text(
post["title"],
maxLines: 3,
style: new TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
new Text(
description.replaceAll("\n", ", "),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: new TextStyle(fontSize: 15.0),
),
new Padding(
padding:
const EdgeInsets.symmetric(vertical: 16.0),
child: new RaisedButton(
child: new Text("READ MORE",style: new TextStyle(color: Colors.white),),
color: Colors.blue,
onPressed: () {
//We will pass description to postview through an argument
Navigator
.of(context)
.push(new MaterialPageRoute<Null>(
builder: (BuildContext context) {
return PostView(post['title'],description,imgUrl);
},
));
},
),
),
Divider(),
],
),
);
},
)));
}
}
这是我在post_view.dart文件中使用的代码:
import 'package:flutter/material.dart';
class PostView extends StatelessWidget {
var desc, title, image;
PostView(String title, String desc, String image) {
this.desc = desc;
this.title = title;
this.image = image;
}
@override
Widget build(BuildContext context) {
if (desc.toString().contains("\n\n\n\n")) {
desc = desc.toString().replaceAll("\n\n\n\n", "\n\n");
}
if (desc.toString().contains("\n\n\n")) {
desc = desc.toString().replaceAll("\n\n\n", "\n");
}
return new Scaffold(
appBar: new AppBar(
title: new Text("Blogger"),
),
body: new Container(
child: new SingleChildScrollView(
child: new Column(
children: <Widget>[
new Padding(
padding:
const EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: new Text(
title,
style: new TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
),
new Padding(
padding:
const EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: new Container(
width: 500.0,
height: 180.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
image: new DecorationImage(
fit: BoxFit.fill,
//check if the image is not null (length > 5) only then check imgUrl else display default img
image: new NetworkImage(image.toString().length > 10
? image.toString()
: "https://www.googleapis.com/blogger/v3/blogs/8902712678213444829/posts/?key=AIzaSyDpwI-kMZ_IxqAJVBKAVtWLOlaGQ5YLEuw")),
),
),
),
new Padding(
padding:
const EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
child: new Text(
desc,
style: new TextStyle(
fontSize: 18.0,
),
),
),
],
))),
);
}
}
编辑:
这是我热重新加载应用程序时控制台上显示的内容:
I/flutter ( 9778): attempting
I/flutter ( 9778): {
I/flutter ( 9778): "kind": "blogger#postList",
I/flutter ( 9778): "items": [
I/flutter ( 9778): {
I/flutter ( 9778): "kind": "blogger#post",
I/flutter ( 9778): "id": "3086822326789809431",
I/flutter ( 9778): "blog": {
I/flutter ( 9778): "id": "8902712678213444829"
I/flutter ( 9778): },
I/flutter ( 9778): "published": "2020-06-15T00:22:00-07:00",
I/flutter ( 9778): "updated": "2020-06-15T22:19:56-07:00",
I/flutter ( 9778): "url": "http://lessmeatapp.blogspot.com/2020/06/mushroom-tagine.html",
I/flutter ( 9778): "selfLink": "https://www.googleapis.com/blogger/v3/blogs/8902712678213444829/posts/3086822326789809431",
I/flutter ( 9778): "title": "Dummy Post 3",
I/flutter ( 9778): "content": "\u003cbr /\u003e\u003cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003e\u003ca href=\"https://1.bp.blogspot.com/-Vv9KcxNHxhU/XuhVnskHvCI/AAAAAAAAAGw/z7tH271PrIEvkQam74G497Gw4A-eFondACK4BGAsYHg/s1400/DD-Grunge-United-Kingdom-Flag-88837-Preview.jpg\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003e\u003cimg border=\"0\" data-original-height=\"980\" data-original-width=\"1400\" src=\"https://1.bp.blogspot.com/-Vv9KcxNHxhU/XuhVnskHvCI/AAAAAAAAAGw/z7tH271PrIEvkQam74G497G
I/flutter ( 9778): https://1.bp.blogspot.com/-Vv9KcxNHxhU/XuhVnskHvCI/AAAAAAAAAGw/z7tH271PrIEvkQam74G497Gw4A-eFondACK4BGAsYHg/s1400/DD-Grunge-United-Kingdom-Flag-88837-Preview
I/flutter ( 9778): https://1.bp.blogspot.com/-hvzDDsO44FI/XuhWvqDjRwI/AAAAAAAAAHI/mBjWane0s5wtdJnkLDrNrmyprVoNeWDagCK4BGAsYHg/s1400/DD-Patriotic-Retro-Background-33092-Preview
I/flutter ( 9778): https://1.bp.blogspot.com/-efv2-Ikiyr8/XuhX-YLtDDI/AAAAAAAAAH0/JJE2mrOU-HMsq6Adu1whv5b3W10yqkRlQCK4BGAsYHg/s1400/20
最佳答案
作为响应，content部分为HTML
对于 float 的HTML，您应该使用fultter_html包
you can find it in this link
这样，您就无需从内容中导出图像
如果您有任何问题要在评论中问我
在PostView构建方法中，将描述变量传递给HTML小部件:
Html(
data: description,
//Optional parameters:
backgroundColor: Colors.white70,
关于flutter - 如何在Flutter中重新格式化Blogger API中的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62401663/