Question

我正在尝试制作这样的小部件：

但是我遇到的问题是，如果标题过长，则会将图标（三角形）推出纸牌范围。

我要拥有的图标应该始终位于卡片和标题的右上角，以占据图像和三角形之间的所有可用空间，但不要更多。如果标题太长，则应换行。

但是应该像这样：

Card(
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
      child: Container(
        height: 130,
        child: Row(
          children: <Widget>[
            Image(
              image: NetworkImage(product.primaryImage.url),
              height: 130,
              width: 60,
            ),
            SizedBox(width: 8),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text(
                      product.name,
                      maxLines: 2,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 8),
                    IconButton(
                      padding: EdgeInsets.zero,
                      iconSize: 24,
                      icon: Icon(Icons.remove_circle_outline),
                      onPressed: () => onRemove(product),
                    )
                  ],
                ),
                SizedBox(height: 8),
                Text("$quantityInCart x \$$price"),
              ],
            ),
          ],
        ),
      ),
    );
  }

在Expanded中包装标题不起作用，因为父级Row赋予了它无限的宽度约束。

Answer 1

您需要使用两个这样的Expanded：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
      height: 300,
      width: 100,
      color: Colors.blue,
    ),
    Expanded(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Text('This is quite a loooooo ooooooooo ooooooo ooooong title',
                  softWrap: true,
                  maxLines: 2,
                ),
              ),
              Icon(Icons.add_alert)
            ],
          ),
          Text('This is a normal description')
        ],
      ),
    )
  ],
)

约束小部件，其他小部件

1 个答案: