Как установить высоту виджетов в сетке в конструкторе флаттера? - PullRequest
0 голосов
/ 26 февраля 2020

У меня есть построитель представления списка. В построителе представления списка есть построитель представления сетки. Работает нормально. Но над последним изображением генерируется нежелательное пространство. Я попытался с помощью fit: Boxfit.fill в виджете изображения, но это делало картинку пиксельной. Есть ли способ динамически строить строки или столбцы во флаттере.


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  var data, localData, innerData, count, imageUrl;

  @override
  void initState() {
    super.initState();
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo Grid")),
      body: ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          localData = data[index];
          count = localData["column"];

          innerData = localData["data"];

          return GridView.builder(
            shrinkWrap: true,
            physics: ScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: count,
            ),
            itemCount: innerData == null ? 0 : innerData.length,
            itemBuilder: (BuildContext context, int index) {
              imageUrl = innerData[index]["imageUrl"];

              // return Container(
              //   padding: const EdgeInsets.all(20),
              //   decoration: BoxDecoration(
              //     image: DecorationImage(
              //       image: NetworkImage(
              //         imageUrl,
              //       ),
              //     ),
              //   ),
              // );

              return Card(
                margin: EdgeInsets.all(10),
                color: Colors.green,
                child: Image.network(imageUrl),
              );
            },
          );
        },
      ),
    );
  } 

 Future<dynamic> getData() async {
    final newEndPoint = "https://api.myjson.com/bins/asy4s";
    final oldEndPoint = "https://api.myjson.com/bins/1fea5o";
    final response = await http.get(newEndPoint);

    final parsedJson = json.decode(response.body);

    setState(() {
      data = parsedJson;
    });
  }
}

Изображение

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Обернуть изображение в виджет с соотношением сторон 16/9

return Card(
                margin: EdgeInsets.all(10),
                color: Colors.green,
                child: AspectRatio( aspectRatio: 16 / 9, child: Image.network(imageUrl)),
              );
0 голосов
/ 26 февраля 2020

Просто проверьте нижеприведенную ссылку, где, если дали пример, где, если динамически создали виджеты и добавили. просто посмотрите пример, возможно, он вам поможет:

Флаттер: различные макеты ListView ItemBuilder, основанные на размерах сетевого изображения

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...