Question

我正在尝试使用GridView建立一个看起来像this的列表，但是我的结果看起来像this。我尝试用Expanded包装图像，结果为this。我假设GridView固定了盒子的高度。我该如何解决？

这是实际代码

body: GridView.builder(
            itemCount: List_features.length,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index) {
              return Item(
                  List_features[index]["title"],
                  "https://image.tmdb.org/t/p/w200/${List_features[index]["poster_path"]}",
                  List_features[index]["vote_average"].toString());
            })

class Item extends StatelessWidget {
  String title;
  String link;
  String note;

  Item(this.title, this.link, this.note);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 8.0),
      child: Column(
        children: <Widget>[
          Flexible(
            child: Card(
                color: Colors.transparent,
                elevation: 5.0,
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(10.0),
                    child: Container(
                      color: Colors.white,
                      height: 240,
                      width: 160,
                      child: Image.network(link),
                    ))),
          ),
          Container(
            width: 180,
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Icon(Icons.star), Text(note)],
          ),
        ],
      ),
    );
  }
}

Answer 1

我没有意识到您的List_features结构，所以我编写了这段代码。这是Item类的更改，我也使用了GridView.count而不是GridView.builder 我希望你会适应你的目的这是工作代码，只需复制粘贴即可查看其工作原理

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Title')),
        body: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 0.67,
          children: List_features.map((item) {
            return Item(item[0], "${item[1]}", item[2].toString());
          }).toList(),
        ),
      ),
    );
  }
}

final List_features = [
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
  ['title', 'https://picsum.photos/1000/1500', 9.7],
];

class Item extends StatelessWidget {
  String title;
  String link;
  String note;

  Item(this.title, this.link, this.note);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 8.0),
      child: Column(
        children: <Widget>[
          Flexible(
            fit: FlexFit.tight,
            child: Container(
              child: Card(
                  child: ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Image.network(link))),
            ),
          ),
          Container(
            child: Text(
              title,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Icon(Icons.star), Text(note)],
          ),
        ],
      ),
    );
  }
}

高度的GridView问题

1 个答案: