flutter - 无法将我的长文本包装在卡片中

Question

我正在尝试将文本放入卡片中，并使卡片在有长文本时自动转到下一行并且卡片变得更长时变得有点灵活

Widget ServiceCard (BuildContext context,double price){
  return Container(
    height: 100,
    margin: EdgeInsets.only(top: 12,right: 8,left: 8),
    width: MediaQuery.of(context).size.width,
    child: Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16)
      ),
      color: Colors.white,
      elevation: 8,
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 8,
            left: 8,
            child: Text("\$$price"),
          ),
          Positioned(
            right: 8,
            top: 8,
            child: Container(
//              height: 70,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(
                      alignment: Alignment.topRight,
                      child: Text("غسيل شعر",style: TextStyle(fontSize: 16),)
                  ),
                  Opacity(
                      opacity:0.7,
                      child: Text(
                          "يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل"

                      )
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    ),
  );
}

有了这段代码，我的文字就会越过卡片，不会转到下一行，甚至卡片的高度也不会被换行

Answer 1

要使 Text 在溢出时换行，理想情况下它必须调整为全宽并且 maxLines 属性必须设置为 null。

但是，我可以看到您遇到了“边缘情况”——您所有的文本都放置在 Stack 小部件中，默认情况下它的宽度不适合其子项。

要解决此问题，请将 Positioned(...) 小部件更改为 Positioned.fill。

例如

Positioned.fill(
  right: 8,
  top: 8,
  child: Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch, // You might want to use this, too - this stretches all children in width by default
      children: <Widget>[
        Container(
          alignment: Alignment.topRight,
          child: Text("غسيل شعر", style: TextStyle(fontSize: 16))
        ),
        Opacity(
          opacity: 0.7,
          child: Text(
            "يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل",
            textDirection: TextDirection.rtl, // I assume this would be helpful too, if your language reads from right to left.
          )
        ),
      ],
    ),
  ),
)

如果这有帮助，请告诉我。