首页 > 解决方案 > 如何显示图像,其文本填充到右侧填充线直到图像高度颤动

问题描述

我正在尝试制作一个页面,我想在该页面上显示事件的图像,并在其右侧显示事件的名称和描述。以下代码在右侧给出了渲染流错误。我制作了卡片来显示事件并试图让它响应。这是我正在尝试做的一个基于网络的颤振项目。错误显示:-

无法测试没有大小的渲染框

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

标签: flutterflutter-web

解决方案


推荐阅读