如何在 flutter 中制作更好的卡片 UI 間距

Question

我有一張帶有容器的卡片，里面有一張桌子。 表格中有一些我無法對齊的文本字段更漂亮。 還有一些比預期的要長，我怎么能說它太長時應該選擇下一行/行？

我的代碼：

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 所以你在每個文本中都有一行（因為你使用了 row 所以我相信你希望這 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),
        ],
      ),),
);

}