在Flutter中转换为GridView.builder

时间:2020-06-16 05:23:33

标签: flutter dart gridview flutter-layout

我想将for循环转换为GridView.builder。我该如何实现?我从API获取。我从HTML内容中过滤了图像标签。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom;

Future<List> fetchWpPosts() async {
  final response = await http.get(
      'https://soleentrepreneur.co.uk/wp-json/w/v1/trending',
      headers: {"Accept": "application/json"});
  var convertDatattoJson = jsonDecode(response.body);
  return convertDatattoJson;
}

class WordPressContentImageDynamic extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: FutureBuilder(
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  // gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                  //     crossAxisCount: 3),
                  itemBuilder: (context, index) {
                    Map wppost = snapshot.data[index];

                    String jsonString = '''${wppost['content']}''';
                    String result = jsonString.replaceAll("\n", "\\n");
                    String result2 = result.replaceAll("\\n", "");
                    var document = parse(result2);
                    var imgList = document.querySelectorAll("img");
                    // return (imgList.isEmpty)
                    //     ? Text('data')
                    //     : Text(imgList.toString());
                    return Column(
                      children: <Widget>[
                        (imgList.isEmpty)
                            ? Text('data')
                            : Text(imgList.toString()),
                        for (dom.Element img in imgList)
                          Image.network(img.attributes["src"]),
                      ],
                    );
                  },
                  itemCount: snapshot.data.length);
            }
            return CircularProgressIndicator();
          },
          future: fetchWpPosts(),
        ),
      ),
    );
  }
}


0 个答案:

没有答案