flutter - 围绕文本的圆圈，当它很长时延伸到椭圆形（颤振）

Question

我正在尝试实现以下行为：当文本长度超过 1 位时，文本周围会变成椭圆形。当然，应该是动态的，比如在whatsapp上：

这是我尝试过的，但这不是您所看到的最佳实践（定位小部件是因为它在堆栈上）：

if (num > 99) {
  return Positioned(
      right: 0,
      top: 5,
      child: ClipRRect(
          borderRadius: BorderRadius.circular(8.0),
          child: Container(
            width: 30,
            height: 20,
            decoration: new BoxDecoration(
              color: orange,
            ),
            child: Center(child:Text("99+",
                style: TextStyle(
                  color: listBackground,
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                  fontFamily: 'Roboto-Regular',
                )),
            ) )));
}
String value = num > 9? "9+" : num.toString();
return Positioned(
  right: 0,
  top: 5,
  child: CircleAvatar(
      radius: 10.0,
      backgroundColor: orange,
      child: Text(value,
          style: TextStyle(
            color: listBackground,
            fontWeight: FontWeight.bold,
            fontSize: 12,
            fontFamily: 'Roboto-Regular',
          ))),
);

有更好的想法吗？

标签： flutterdartuser-interfaceflutter-layoutflutter-widget

Answer 1

您可以像这样使用带有填充和 BorderRadius 的容器：

Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.all(
          Radius.circular(15.0),
        ),
      ),
      padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
      child: const Text('2'),
    );
  }

我在 dartpad 上运行它，它看起来像这样：