flutter - 如何显示图像,其文本填充到右侧填充线直到图像高度颤动
问题描述
我正在尝试制作一个页面,我想在该页面上显示事件的图像,并在其右侧显示事件的名称和描述。以下代码在右侧给出了渲染流错误。我制作了卡片来显示事件并试图让它响应。这是我正在尝试做的一个基于网络的颤振项目。错误显示:-
无法测试没有大小的渲染框
检查 Loren Ipsum 文本:-
class OurEvents extends StatelessWidget {
const OurEvents({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 40.0),
Text(
"Our Events",
style: Theme.of(context).textTheme.headline6,
),
Responsive(
mobile: EventCardView(
crossAxisCount: 1,
childAspectRatio: 1,
),
mobileLarge: EventCardView(crossAxisCount: 1),
tablet: EventCardView(childAspectRatio: 1),
desktop: EventCardView(),
)
],
);
}
}
class EventCardView extends StatelessWidget {
const EventCardView({
Key? key,
this.crossAxisCount = 1,
this.childAspectRatio = 1,
}) : super(key: key);
final int crossAxisCount;
final double childAspectRatio;
@override
Widget build(BuildContext context) {
return ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: myEvents.length,
itemBuilder: (context, index) => EventScreenCard(
events: myEvents[index],
),
);
}
}
class EventScreenCard extends StatelessWidget {
const EventScreenCard({
Key? key,
required this.events,
}) : super(key: key);
final Events events;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
EventImage(path: "assets/images/poster/playera.jpg"),
SizedBox(width: 30.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Event"),
SizedBox(height: 20.0),
Text("Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text."),
],
),
],
),
);
}
}
class EventImage extends StatelessWidget {
const EventImage({Key? key, required this.path}) : super(key: key);
final String path;
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.width / 6.5,
width: MediaQuery.of(context).size.width / 6.5,
decoration: BoxDecoration(
color: secondaryColor,
image: DecorationImage(
image: AssetImage(
path,
),
fit: BoxFit.fill,
),
),
);
}
}
解决方案
推荐阅读
- postgresql - 如何从 dbeaver 中的转储文件恢复 PostgreSQL 数据库?
- javascript - 升级到 JQuery 3.5.1 后字段中断
- python - 不同形状矩阵的矩阵 Python
- django - 具有多级外键的 Django 模型表单
- ionic-framework - CameraSource.Photos 正在打开 pwa 相机而不是画廊
- django - Django 的身份验证后端和 DRF 的令牌身份验证只是同一件事的两种方法吗?
- selenium - 如何在 Selenium 中切换到活动选项卡
- asp.net-core-mvc - 如何在 asp.net core 中保存和检索数据?
- php - 上传的图像未加载 Laravel 7
- networking - 如何在同一主机上的不同命名空间中配置多个入口