Flutter TextField如何设置完美半圆边角？如何确定对应半径？

要做出完美半圆的边角，核心逻辑很简单：让圆角半径等于TextField高度的一半。具体操作分两种场景处理：

1. 固定高度的TextField #

如果已经给TextField指定了固定高度，直接把BorderRadius.circular的参数设为高度的一半即可。比如TextField高度设为60，半径就设为30：

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30.0), // 60 ÷ 2 = 30
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 15), // 调整内边距避免文字贴边
  ),
)

2. 自适应高度的TextField #

如果TextField高度随内容自适应（比如支持多行输入），可以通过两种方式处理：

• 先限制高度范围，再用范围的中间值或固定比例设置半径：

TextField(
  maxLines: null,
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(20.0), // 对应最小高度40的一半
    ),
    constraints: BoxConstraints(minHeight: 40, maxHeight: 80),
  ),
)

• 用LayoutBuilder动态获取TextField的实际高度，再计算对应半径：

LayoutBuilder(
  builder: (context, constraints) {
    final fieldHeight = constraints.maxHeight;
    return TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(fieldHeight / 2),
        ),
      ),
    );
  },
)

关键原理 #

完美半圆的本质是圆角圆弧的直径等于控件的高度，因此半径必须是高度的一半。如果没显式设置高度，可以通过Flutter DevTools查看TextField的实际渲染高度，再代入计算半径值。

内容的提问来源于stack exchange，提问作者Guru