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.
          )
        ),
      ],
    ),
  ),
)

让我知道这是否有帮助。

不能将我的长文字乱七八糟地包裹在卡片中

1 个答案: