flutter - 如何解决这个问题?我没有得到字幕文本
问题描述
在目录下面的类别中查看我无法在我的图片下方显示字幕
我所做的粘贴在下面。我想查看图像的标题,并且路径已经提供并存储在图像的 ImageLocation 变量和字幕文本的 ImageCaption 变量中。下面是页面的完整代码,并且在 main.dart 中调用了 HorizontalList 类
import 'package:flutter/material.dart';
class HorizontalList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 80.0,
child:ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Category(
imageLocation: 'images/cats/tshirt.png',
imageCaption: 'shirt',
),
Category(
imageLocation: 'images/cats/jeans.png',
imageCaption: 'jeans',
),
Category(
imageLocation: 'images/cats/dress.png',
imageCaption: 'dress',
),
Category(
imageLocation: 'images/cats/formal.png',
imageCaption: 'formal',
),
Category(
imageLocation: 'images/cats/shoe.png',
imageCaption: 'shoe',
),
Category(
imageLocation: 'images/cats/informal.png',
imageCaption: 'informal',
),
Category(
imageLocation: 'images/cats/accessories.png',
imageCaption: 'accessory',
),
],
),
);
}
}
class Category extends StatelessWidget {
final String imageLocation;
final String imageCaption;
Category({
this.imageLocation,
this.imageCaption
});
@override
Widget build(BuildContext context) {
return Padding(padding: const EdgeInsets.all(2.0),
child: InkWell(
onTap: (){},
child: Container(
width: 100.0,
child: new ListTile(
title: Image.asset(
imageLocation,
width: 100.0,
height: 80.0
),
subtitle: Container(
alignment: Alignment.topCenter,
child: Text(imageCaption, style: new TextStyle(fontSize: 12.0),)
),
),
),
),
);
}
}
解决方案
你只需要删除它,height: 80.0,
因为它正在修剪你的卡片
所以你的代码将是
import 'package:flutter/material.dart';
class HorizontalList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child:ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Category(
imageLocation: 'images/cats/tshirt.png',
imageCaption: 'shirt',
),
Category(
imageLocation: 'images/cats/jeans.png',
imageCaption: 'jeans',
),
Category(
imageLocation: 'images/cats/dress.png',
imageCaption: 'dress',
),
Category(
imageLocation: 'images/cats/formal.png',
imageCaption: 'formal',
),
Category(
imageLocation: 'images/cats/shoe.png',
imageCaption: 'shoe',
),
Category(
imageLocation: 'images/cats/informal.png',
imageCaption: 'informal',
),
Category(
imageLocation: 'images/cats/accessories.png',
imageCaption: 'accessory',
),
],
),
);
}
}
class Category extends StatelessWidget {
final String imageLocation;
final String imageCaption;
Category({
this.imageLocation,
this.imageCaption
});
@override
Widget build(BuildContext context) {
return Padding(padding: const EdgeInsets.all(2.0),
child: InkWell(
onTap: (){},
child: Container(
width: 100.0,
child: new ListTile(
title: Image.asset(
imageLocation,
width: 100.0,
height: 80.0
),
subtitle: Container(
alignment: Alignment.topCenter,
child: Text(imageCaption, style: new TextStyle(fontSize: 12.0),)
),
),
),
),
);
}
}
推荐阅读
- java - Java AWT 在随机时间长度后停止监听输入
- javascript - 在 axios 请求中传递原始数据
- python - 用漂亮的汤得到一个 CSS 表
- sql - 如何从内部连接字段 SQL 中获取最大记录?
- jboss - 在 Wildfly 中,侦听外部 ActiveMQ 的 MDB 获得一个空的 JMSMessageId
- javascript - 如何修复“我的机器人无法使用我的服务器表情符号”不和谐
- javascript - 如何设置计时器以等待在 html 中设置 iframe src?
- r - 如何最小化 R 中的线性最小二乘函数?
- android - 在数据绑定属性中传递类类型
- flutter - Flutter中包导入和普通导入有什么区别?