flutter - 这是颤振中的错误吗？装饰框和图标按钮

Question

我用 DecoredBox 包装了 IconButton，为什么闪屏显示不正确？

这是错误还是我错了？有没有人有办法解决吗？

BoxDecoration decoration = BoxDecoration(
      color: theme.backgroundColor,
      borderRadius: BorderRadius.all(Radius.circular(8)),
      border: Border.symmetric(
          horizontal: BorderSide(color: borderColor, width: 1.0, style: BorderStyle.solid),
          vertical: BorderSide(color: borderColor, width: 1.0, style: BorderStyle.solid),
      ),
    );

DecoratedBox(
      decoration: decoration,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 4, vertical: 0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          textDirection: direction,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            searchIcon,
            Expanded(
              child: input,
            ),
            clearIcon,
          ],
        ),
      ),
    )

Answer 1

飞溅是不可见的，因为您已为BoxDecoration.

尝试以下解决方案

Card(
              color: Colors.white,
              clipBehavior: Clip.antiAlias,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8),
                side: BorderSide(color: Colors.black12),
              ),
              child: Container(
                padding: EdgeInsets.all(3),
                child: Row(
                  children: [
                    IconButton(
                      splashRadius: 25,
                      onPressed: () {},
                      icon: Icon(Icons.search),
                    ),
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    IconButton(
                      splashRadius: 25,
                      onPressed: () {},
                      icon: Icon(Icons.close),
                    )
                  ],
                ),
              ),
            )

Answer 2

这是飞溅效果，我也使用了 IconButton 小部件我也有同样的问题，但是当我使用 Inkwell 小部件时，我的飞溅效果没有显示，并且我的飞溅效果在文本字段上方。试试下面的代码而不是 IconButton 希望它对你有帮助

InkWell Widget，您也使用了GesterDectector

suffixIcon: InkWell( 
   child:Icon(Icons.search),
   onTap:(){},
 ),

如果你需要飞溅

试试下面的代码，按下搜索图标，看看我显示的下图所示的飞溅

TextFormField(
      decoration: InputDecoration(
        suffixIcon: IconButton(onPressed: (){},
        icon:Icon(Icons.search),
       ),
        border: OutlineInputBorder(),
      ),
    )

当我使用 IconButton 小部件时，我的启动结果就像 ->

Answer 3

我解决了我的问题。

我使用了 Material()。

更新代码：

DecoratedBox(
      decoration: decoration,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 4, vertical: 0),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          textDirection: direction,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Material(
                color: Colors.transparent,
                type: MaterialType.circle,
                clipBehavior: Clip.antiAlias,
                borderOnForeground: true,
                elevation: 0,
                child: searchIcon,
              ),
            Expanded(
              child: input,
            ),
            Material(
                color: Colors.transparent,
                type: MaterialType.circle,
                clipBehavior: Clip.antiAlias,
                borderOnForeground: true,
                elevation: 0,
                child: clearIcon,
              ),
          ],
        ),
      ),
    )