如何在 flutter 中制作更好的 Card UI 间距

Question

我有一张带有容器的卡片 table。在 table 中有一些文本字段，我无法将其对齐得更漂亮。还有一些比预期的要长，怎么说长了就应该选下一个row/line？

我的代码：

Widget buildCard(tage snap) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      color: choosecardcolor(snap),
      elevation: 5,
      //color: _chooseColor(snap.art.toString()),
      child:
          Container(
            padding: const EdgeInsets.all(10),
            child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(snap.stunde, style: const TextStyle(fontSize: 20),),
                  Text(snap.klasse, style: const TextStyle(fontSize: 20),),
                  Text(snap.fach, style: const TextStyle(fontSize: 20),),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(snap.raum, style: const TextStyle(fontSize: 20),),
                  Text(snap.art, style: const TextStyle(fontSize: 20),),
                  Text(snap.lehrer, style: const TextStyle(fontSize: 20),),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text(snap.mitteilung, style: const TextStyle(fontSize: 20),),
                ],
              ),
            ],
          ),),
    );
  }

Answer 1

我认为这应该适合你我刚刚删除了行小部件并将所有文本变量都放在一个文本小部件中并添加了一个溢出以指示您的文本很长并且溢出

我还添加了 maxLines: 1 所以你在每个文本中得到一行（因为你使用了行所以我相信你希望这 3 个值彼此相邻出现以防万一如果有多行你可以只需删除它)

Widget buildCard(tage snap) {
return Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  color: choosecardcolor(snap),
  elevation: 5,
  //color: _chooseColor(snap.art.toString()),
  child:
      Container(
        padding: const EdgeInsets.all(10),
        child: Column(
        children: [
          Text(snap.stunde+" "+snap.klasse+" "+snap.fach, style: const TextStyle(fontSize: 20),overflow:TextOverflow.ellipsis,maxLines:1),
          Text(snap.raum+snap.art+" "+snap.lehrer, style: const TextStyle(fontSize: 20),overflow:TextOverflow.ellipsis,maxLines:1),
          Text(snap.mitteilung, style: const TextStyle(fontSize: 20),overflow:TextOverflow.ellipsis,maxLines:1),
        ],
      ),),
);

}

如何在 flutter 中制作更好的 Card UI 间距

How can I make a better Card UI spacing in flutter

user-interface

flutter