在网格图块栏上设置高度

如何解决在网格图块栏上设置高度

我有一个关于 GridTile Bar 高度的一般性问题。

我目前有这样的 GridTile 显示：

我的目标是这样：

当我添加 SizedBox 以在价格和地址之间留一个空格时，地址会从第二行被截断。

关于如何向上移动的任何想法。

这是我的网格图块代码：

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,children: <Widget>[
                    Flexible(
                      child: Text(
                        '${listing.street},${listing.street2},${listing.city},${listing.state},${listing.zipCode}',maxLines: 3,style: TextStyle(
                            fontSize: 14,fontWeight: FontWeight.w500),SizedBox(
                      height: 5,Text(
                      '|',style: TextStyle(
                          fontSize: 18,fontWeight: FontWeight.bold),SizedBox(
                      width: 5,Text(
                      '${listing.bedRooms} bds',Text(
                      '${listing.bathRooms} bth',],SizedBox(
                height: 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),);
  }
}

我曾尝试更改网格中的 childAspectRatio，但我只得到封面照片以变大，而不是我想要向上移动的 Tile Bar。

有什么想法吗？

亲切的问候。

解决方法

将 GridTileBar 小部件放在 Container 小部件中，并为其指定所需的高度。这是一个示例代码：

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