Flutter：如何使Flutter芯片增大和缩小以匹配标签长度

Question

我正在创建一个飘动的筹码，其中带有HTML文本的标签为tag（br）。我希望根据“ br标签和芯片小部件的尺寸来打破标签，以反映出来。

这是我的样品：

Chip(
  avatar: CircleAvatar(
    backgroundColor: Colors.grey.shade800,
    child: Text('AB'),
  ),
  label: HtmlWidget('You have pushed the button <br>this many times:'),
),

我正在使用“ flutter_widget_from_html_core”呈现html。

文本自动换行，但小部件保持相同大小

请让我知道如何解决它或替代方法

示例

Answer 1

HtmlWidget在换行符的情况下计算大小似乎有些问题。

一个简单的修复程序应该起作用。

编辑：该代码也具有响应性，只需通过responsive:true

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Chip(
      avatar: CircleAvatar(
        backgroundColor: Colors.grey.shade800,
        child: Text('AB'),
      ),
      label: ResponsiveBrTag(
        'You have pushed the button very hard <br> this many times:',
      ),
    );
  }
}

class ResponsiveBrTag extends StatelessWidget {
  final String htmlText;
  final bool responsive;
  const ResponsiveBrTag(this.htmlText, {this.responsive = false});
  @override
  Widget build(BuildContext context) {
    var splits = htmlText.split("<br>");
    var fixedLayout = Column(
      children: splits.map((s) => Text(s)).toList(),
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
    );
    var respLayout = Wrap(children: splits.map((s) => Text(s)).toList());

    return responsive ? respLayout : fixedLayout;
  }
}

注意：我还没有完全测试它的错误，这只是示例代码。