Flutter中如何根据父组件高度设置IconButton的水波纹半径

要让IconButton的水波纹半径适配父容器高度，有两种简单可行的方案：

方案一：通过LayoutBuilder获取父容器约束，动态设置splashRadius #

利用LayoutBuilder获取父容器的最大高度，将IconButton的splashRadius设为父容器高度的一半，确保水波纹不会超出文本框范围。

修改后的代码：

class CustomTextField extends StatelessWidget {
  final String hint;
  final bool isitpassword;
  final TextEditingController controller;
  const CustomTextField({Key? key, required this.hint, this.isitpassword = false, required this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10.0),
      child: LayoutBuilder(
        builder: (context, constraints) {
          // 取父容器最大高度的一半作为水波纹半径
          final splashRadius = constraints.maxHeight / 2;
          return Container(
            padding: EdgeInsets.symmetric(horizontal: 20),
            decoration: BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.circular(20),
            ),
            child: TextField(
              style: TextStyle(fontSize: 20, color: Colors.white),
              controller: controller,
              obscureText: isitpassword,
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: hint,
                suffixIcon: IconButton(
                  splashRadius: splashRadius,
                  icon: Icon(Icons.close, color: Colors.white),
                  onPressed: () {
                    controller.text = '';
                  },
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

方案二：用InkWell包裹Icon，配合容器裁剪 #

如果不想手动计算半径，可以用InkWell替代IconButton，同时给父Container设置clipBehavior: Clip.hardEdge，让水波纹被容器的圆角裁剪，不会超出范围。

修改后的代码：

class CustomTextField extends StatelessWidget {
  final String hint;
  final bool isitpassword;
  final TextEditingController controller;
  const CustomTextField({Key? key, required this.hint, this.isitpassword = false, required this.controller}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10.0),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(20),
        ),
        // 添加裁剪，限制水波纹范围
        clipBehavior: Clip.hardEdge,
        child: TextField(
          style: TextStyle(fontSize: 20, color: Colors.white),
          controller: controller,
          obscureText: isitpassword,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: hint,
            suffixIcon: InkWell(
              borderRadius: BorderRadius.circular(20),
              onTap: () {
                controller.text = '';
              },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Icon(Icons.close, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

两种方案都能解决水波纹超出文本框的问题，方案一精准控制半径，方案二更依赖容器裁剪，可根据需求选择。

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