使用 Flutter 容器時，一切正常，但沒有漣漪效應 - 但 Ink 繪制超出其父級

Question

我想在 singlechildscrollview 中提供一些按鈕

 Column( children: < Widget > [ SizedBox(height: constraints.maxHeight / 8.0), AnimationConfiguration.staggeredList( position: 1, duration: const Duration(milliseconds: 2000), child: SlideAnimation( verticalOffset: constraints.maxHeight / 10, child: FadeInAnimation( child: Image.asset('images/mylive.png'), ), ), ), Flexible( child: Padding( padding: EdgeInsets.fromLTRB( 50, 20, 50, constraints.maxHeight / 7), child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(10), child: Wrap( spacing: 25, runSpacing: 25, children: const < Widget > [ ButtonCard( name: "My News", imgpath: "open-email.png", count: 0),

這是 ButtonCard 的構建方法：

 Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; final double height = MediaQuery.of(context).size.height; return InkWell( onTap: () {}, child: Container( <<--->> Ink( padding: const EdgeInsets.all(10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: Colors.white, boxShadow: const [ BoxShadow( color: Colors.black38, offset: Offset(0, 2), blurRadius: 7, ), ], ), child: Column( children: [ Stack( children: [ Image.asset( "assets/images/$imgpath", width: 60, ), ], ), Padding( padding: const EdgeInsets.only(top: 8.0), child: Text( name, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 15, ), ), ), ], ), ), ); }

當我在 ButtonCard 中使用容器時，一切正常，但 InkWell 沒有顯示波紋效果（因為 BoxDecation 顏色設置）

這會產生以下正確的滾動視圖：

但是當我將 Container 更改為 Ink 時 - 我得到了我想要的美麗的漣漪效果。 但隨后在 scolling 期間發生以下錯誤：

如您所見，帶有盒子裝飾的 Ink 在父邊框上繪制。 這是 Ink 中的錯誤還是有人知道這里有什么問題？ 謝謝

Answer 1

一般情況下：

1. 用Inkwell包裹Container
2. 用Material包裹Inkwell
3. 使用Material顯示所需的顏色
4. 將Container顏色設置為transparent

通過上述設置，您可以使用 Inkwell 產生漣漪效果。 但是當你有漸變顏色時很難實現。

參考： https : //flutteragency.com/inkwell-not-showing-ripple-effect-in-flutter/

Answer 2

你必須有材料 -> 墨水瓶 -> 墨水