Question

我是flutter的初学者，我正在创建一个代表足球联赛赛程表的小部件，但是在我执行之后，我发现我的屏幕没有响应并且显示效果不佳，出现了一个黄色区域，并且显示日期和时间并不总是在中心，小部件变得不符合人体工程学这是执行后的图像：

这里是我试过的代码：

import 'package:flutter/material.dart';


class BroadcastSchedule extends StatelessWidget  {

  String home;
  String homeImage;
  String away;
  String awayImage;
  String time;
  String date;

  BroadcastSchedule(this.home,this.homeImage,this.away,this.awayImage,this.time,this.date);

  @override
  Widget build(BuildContext context) {
    return  Card(
      elevation: 4.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child:
        Row(
          children: <Widget>[
            CircleAvatar(
              backgroundImage: NetworkImage(this.homeImage),
            ),
            const SizedBox(width:10.0),
            Spacer(),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget> [
                Text(this.home),
                const SizedBox(height: 5.0, ),
              ],
            ),
            Padding(
              padding: EdgeInsets.only(top:20.0, left: 20.0, right: 20.0),
             child: Container(
               padding: EdgeInsets.all(2.0),
               decoration: BoxDecoration(
                color: Colors.grey[700],
                 borderRadius: BorderRadius.circular(11.0),
               ),
               child: Column(

                 children: [
                   Text(this.time,style: TextStyle(
                       fontWeight: FontWeight.bold,
                       fontSize: 18.0,
                       color: Colors.white,
                   ),),
                   const SizedBox(height: 5.0, ),
                   Text(this.date,style: TextStyle(
                       fontWeight: FontWeight.bold,
                       fontSize: 16.0,
                       color: Colors.white
                   ),),
                 ],
               ),
             ),
           ),
           
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget> [
                Text(this.away),
                const SizedBox(height: 5.0, ),
              ],
            ),
            Spacer(),
            CircleAvatar(
              backgroundImage: NetworkImage(this.awayImage),
            ),
          ],
        ),
      ),
    );
  }
}

我的女孩将学习如何使我的代码具有响应性，并且在任何情况下都不会出现这样的显示错误

在列上方添加 Expanded 后，灰色的 Box 还是错位，长 Text 有问题

Answer 1

好像你的文字溢出了。

在列小部件上方添加了扩展。 Expanded ：扩展 [Row]、[Column] 或 [Flex] 子元素的小部件以便孩子填满可用空间。

但现在我们必须修复长文本。

Expanded(child:  Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget> [
                Text(this.away),
                const SizedBox(height: 5.0, ),
              ],
            ),
            Spacer(),
            CircleAvatar(
              backgroundImage: NetworkImage(this.awayImage),
            ),)

如何在颤振中使显示响应

1 个答案: