Flutter 设置网格平铺条上的高度

我有一个关于网格条高度的一般性问题

我当前的网格显示如下所示：

我的目标是这样：

当我添加SizedBox以在price和Address之间留出一个空格时，地址在第二行被截断

有没有关于如何升级的想法

以下是我的网格磁贴代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';

import '../providers/listing.dart';

class ListingItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final listing = Provider.of<Listing>(context, listen: false);
    final formatDolar = new NumberFormat("#,##0.00", "en_US");

    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: GridTile(
        child: GestureDetector(
          onTap: () {},
          child: Image.network(
            listing.coverPhoto,
            fit: BoxFit.cover,
          ),
        ),
        header: GridTileBar(
          title: Text(''),
          trailing: IconButton(
            icon: Icon(Icons.favorite_border),
            color: Theme.of(context).accentColor,
            onPressed: () {},
          ),
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black54,
          title: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                '\$ ${formatDolar.format(listing.price)}',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              SizedBox(
                width: 20,
                height: 5,
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Flexible(
                      child: Text(
                        '${listing.street}, ${listing.street2}, ${listing.city}, ${listing.state}, ${listing.zipCode}',
                        maxLines: 3,
                        style: TextStyle(
                            fontSize: 14,
                            color: Colors.white,
                            fontWeight: FontWeight.w500),
                      ),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Text(
                      '|',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(
                      '${listing.bedRooms} bds',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(
                      '|',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text(
                      '${listing.bathRooms} bth',
                      style: TextStyle(
                          fontSize: 18,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 1,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：provider/provider.dart”；
导入“包：intl/intl.dart”；
导入“../providers/listing.dart”；
类ListingItem扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终列表=Provider.of（上下文，listen:false）；
final formatDolar=新的数字格式（“0.00”、“en#u US”）；
返回ClipRRect(
边界半径：边界半径。圆形（10），
孩子：格子(
儿童：手势检测器(
onTap:（）{}，
孩子：Image.network(
listing.coverPhoto，
适合：BoxFit.cover，
),
),
标题：GridTileBar(
标题：文本（“”），
尾随：图标按钮(
图标：图标（图标。收藏夹边框），
颜色：主题。背景。强调颜色，
按下：（）{}，
),
),
页脚：GridTileBar(
背景颜色：颜色。黑色54，
标题：专栏(
mainAxisAlignment:mainAxisAlignment.start，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
正文(
“\$${formatDolar.format（listing.price）}”，
样式：TextStyle(
尺寸：14，
fontWeight:fontWeight.bold，
颜色：颜色，白色，
),
),
大小盒子(
宽度：20，
身高:5,，
),
扩大(
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
灵活的(
子：文本(
“${listing.street}，${listing.street2}，${listing.city}，${listing.state}，${listing.zipCode}”，
maxLines:3，
样式：TextStyle(
尺寸：14，
颜色：颜色，白色，
fontWeight:fontWeight.w500），
),
),
大小盒子(
身高:5,，
),
正文(
'|',
样式：TextStyle(
尺码：18，
颜色：颜色，白色，
fontWeight:fontWeight.bold），
),
大小盒子(
宽度：5，
),
正文(
“${listing.beddrooms}bds”，
样式：TextStyle(
尺码：18，
颜色：颜色，白色，
fontWeight:fontWeight.bold），
),
大小盒子(
宽度：5，
),
正文(
'|',
样式：TextStyle(
尺码：18，
颜色：颜色，白色，
fontWeight:fontWeight.bold），
),
大小盒子(
宽度：5，
),
正文(
“${listing.bathroms}bth”，
样式：TextStyle(
尺码：18，
颜色：颜色，白色，
fontWeight:fontWeight.bold），
),
大小盒子(
宽度：5，
),
],
),
),
大小盒子(
身高:1,，
),
],
),
),
),
);
}
}

这是网格的代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../providers/listings.dart';
import './listing_item.dart';

class ListingGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final listingData = Provider.of<Listings>(context);
    final listings = listingData.items;

    return GridView.builder(
      padding: const EdgeInsets.all(10.0),
      itemCount: 10,
      itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
        value: listings[i],
        child: ListingItem(),
      ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 3.5 / 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：provider/provider.dart”；
导入“../providers/listings.dart”；
导入“./listing_item.dart”；
类ListingGrid扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终列表数据=Provider.of（上下文）；
最终列表=listingData.items；
返回GridView.builder(
填充：常数边集全部（10.0），
物品计数：10，
itemBuilder：（ctx，i）=>ChangeNotifierProvider.value(
值：清单[i]，
子项：ListingItem（），
),
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：1，
儿童方面：3.5/2，
横轴间距：10，
主轴间距：10），
);
}
}

我尝试过在网格中更改childAspectRatio，但我只得到封面照片以使其变大，而不是我想要向上移动的平铺条

有什么想法吗

---

问候。

将GridTileBar小部件放在容器中小部件中，并给它您想要的高度。下面是一个示例代码：

       GridTile(
            footer: Container(
              padding: const EdgeInsets.all(8),
              color: Colors.black54,
              height: 60,
              child: GridTileBar(
                title: Text(
                  "Example",
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),

---

多谢各位