由其他小部件约束小部件答案

【问题标题】：Constraint widget by other widget由其他小部件约束小部件
【发布时间】：2019-12-23 12:00:27
【问题描述】：

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

但我遇到的问题是，如果标题太长，它会将图标（三角形）推出卡片的边界。

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

但应该是这样的：

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 给它无限的宽度限制。

【问题讨论】：

使用扩展作为您的行小部件的父级。
@OMiShah 没有帮助，但是将 Column 包裹在 Expanded 中做到了。
哦，抱歉，我没看到专栏。我认为文本小部件直接在行下方而不是在行下方。

标签： flutter flutter-layout

【解决方案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')
        ],
      ),
    )
  ],
)

【讨论】：