问题描述
我目前有这样的 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),),