flutter - 在网格图块栏上设置高度
问题描述
我有一个关于 GridTile Bar 高度的一般性问题。
我目前有这样的 GridTile 显示:
我的目标是这样:
当我添加 SizedBox 以在价格和地址之间留一个空格时,地址被切断第二行。
关于如何向上移动的任何想法。
这是我的 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。
有任何想法吗?
亲切的问候。
解决方案
将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),
),
),
),
推荐阅读
- android - 无法在 android studio 中生成签名的 apk
- parsing - 在执行时定义数据类型?
- python - 加载保存的模型后,在同一评估数据集上获得不同的准确度
- html - HTML/CSS:如何使某些输入字段在表单的同一行?
- regex - 此特定正则表达式中带有 - (减号)的正则表达式的含义
- reactjs - 使用 react-hook-form 时无法测试 onSubmit
- reactjs - 反应错误的数字运算结果
- go - 为什么从 GO 触发时,我的 GraphQL 查询没有返回正确的结果?
- c++ - 从小写到大写引用控制台应用程序
- python - 包结构 - 如何避免重复的文件和对象名称