将 Flutter 波纹效果约束到具有圆形边框的文本字段答案

【问题标题】：Constrain Flutter ripple effect to text field with rounded border将 Flutter 波纹效果约束到具有圆形边框的文本字段
【发布时间】：2019-11-06 08:18:54
【问题描述】：

我一直试图让涟漪效应在带有圆形边框的 TextField 中正常工作。在示例代码中，有两个文本字段，都存在问题。在顶场，涟漪效应不仅限于圆形边框；它延伸到小部件的矩形边界，如下所示（请忽略绿色圆圈）：

第二个小部件试图通过用Material 和ClipRRect 包围该字段来解决此问题。这部分有效，并且通常正确地将涟漪效应限制在组件的边界。但是，当验证失败并显示验证错误时，渲染会被剪辑搞砸：

有没有办法让涟漪效应在所有情况下都正确地停留在文本字段边框内？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(inputDecorationTheme: _theme()),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              _textField(),
              ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: Material(
                  child: _textField(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  InputDecorationTheme _theme() => ThemeData.light().inputDecorationTheme.copyWith(
        errorBorder: _makeRoundedInputBorder(),
        enabledBorder: _makeRoundedInputBorder(),
        focusedBorder: _makeRoundedInputBorder(),
        focusedErrorBorder: _makeRoundedInputBorder(),
      );

  OutlineInputBorder _makeRoundedInputBorder() =>
      OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(40)));

  TextFormField _textField() => TextFormField(
        validator: (value) => value.length > 5 ? "Can't have more than five characters" : null,
        autovalidate: true,
      );
}

【问题讨论】：

您是否尝试过使用普通文本字段，并将其封装在圆形容器中？
@JulienLachal 你有一个例子来说明你的想法吗？
尝试将Column 的子代替换为Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(40)), child: _textField());
@JulienLachal 唉，这与第一种情况具有相同的行为，其中涟漪效应溢出圆形边框。

标签： flutter

【解决方案1】：

我使用了材质的borderRadius和clipBehavior，它对我有用。

Material(
  borderRadius: BorderRadius.circular(10),
  clipBehavior: Clip.hardEdge,
  child: _textField(),
)

【讨论】：

这工作正常，应该是公认的答案。谢谢老哥！

【解决方案2】：

user7408943 提供的answer 是正确的，并且可以正常工作。我正在添加另一个示例来改进答案。

         return Material(
            borderRadius: BorderRadius.circular(15),
            elevation: 5,
            clipBehavior: Clip.hardEdge,
            child: InkWell(
              onTap: () {
                printInfo(info: 'Sample data is coming!');
              },
              child: CachedNetworkImage(
                height: Adapt.height(73),
                width: Adapt.height(73),
                fit: BoxFit.contain,
                imageUrl: announcement.imageAttachments[i].url,
                progressIndicatorBuilder: (c, t, p) {
                  return Center(
                    child: SizedBox(
                      height: 25,
                      width: 25,
                      child: CircularProgressIndicator(),
                    ),
                  );
                },
              ),
            ),
          );

【讨论】：