在网格图块栏上设置高度

Question

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

我目前有这样的 GridTile 显示：

我的Objective是这样的：

当我添加 SizedBox 以在价格和地址之间留下 space 时，地址被截断了第二行。

关于如何提升它的任何想法。

这是我的 Grid Tile 代码：

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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这是网格的代码：

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。

有什么想法吗？

亲切的问候。

Answer 1

将 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),
                ),
              ),
            ),

在网格图块栏上设置高度

Setting Height on Grid Tile Bar

gridview

tile

flutter

flutter-layout