Flutter Flexible Text 在 Column 中溢出

Question

我正在创建一个列表磁贴，其中包含从 Internet 下载的主要图像。图像可以是风景或肖像。根据图片大小 space 可用于标题文本更改。

当图像从可用的 Internet 下载时 space 得到 re-adjusted。

为了解决这个问题，我使用了 Flexible 小部件和 TextOverflow.ellipsis。在我将 Flexible 添加到列中以添加子标题之前，这很有效。

现在我收到较长标题文本的溢出错误。

知道如何解决这个问题吗？

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          constraints: BoxConstraints(minHeight: 50, maxHeight: 100),
          child: ClipRRect(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8),
                bottomLeft: Radius.circular(8)),
            child: FadeInImage(
              placeholder: AssetImage('images/placeholder-image.png'),
              image: NetworkImage(post.imageURL),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              child: Container(
                padding: const EdgeInsets.fromLTRB(8, 8, 5, 5),
                child: new Text(
                  post.title,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 15,
                      color: Theme.of(context).primaryColor),
                ),
              ),
            ),
          ],
        ),
      ],
    )

Answer 1

用 Flexible 包裹 Column 而不是用 Flexible 包裹 Text:

Flexible(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.fromLTRB(8, 8, 5, 5),
                  child: new Text(
                    post.title,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                        color: Theme.of(context).primaryColor),
                  ),
                ),
              ],
            ),
          ),

Answer 2

使用Expanded

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          constraints: BoxConstraints(minHeight: 50, maxHeight: 100),
          child: ClipRRect(
            borderRadius: const BorderRadius.horizontal(
              left: Radius.circular(8),
            ),
            child: FadeInImage(
              placeholder: NetworkImage('https://picsum.photos/100'),
              image: NetworkImage('https://picsum.photos/100'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Title',
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: Colors.white,
                  ),
                ),
                Text(
                  'Subtitle',
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Flutter Flexible Text 在 Column 中溢出

Flutter Flexible Text is overflowing in Column

text

overflow

flutter