注意：無(wú)特殊說(shuō)明，F(xiàn)lutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

InkWell

InkWell組件在用戶點(diǎn)擊時(shí)出現(xiàn)“水波紋”效果，InkWell簡(jiǎn)單用法：

InkWell(
        onTap: (){},
        child: Text('這是InkWell點(diǎn)擊效果'),
      )

onTap是點(diǎn)擊事件回調(diào)，如果不設(shè)置無(wú)法出現(xiàn)“水波紋”效果，效果如下：

設(shè)置水波紋顏色：

InkWell(
    onTap: () {},
    splashColor: Colors.red,
    ...
)

效果如下：

設(shè)置高亮顏色顏色：

InkWell(
    onTap: () {},
    highlightColor: Colors.blue,
    ...
)

高亮顏色是按住時(shí)顯示的顏色，效果如下：

給字體添加邊距和圓角邊框，擴(kuò)大“水波紋”效果：

InkWell(
        onTap: (){},
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 20,vertical: 8),
          decoration: BoxDecoration(
            border:Border.all(color: Colors.blue),
            borderRadius: BorderRadius.all(Radius.circular(30))
                
          ),
          child: Text('這是InkWell點(diǎn)擊效果'),
        ),
      )

效果如下：

發(fā)現(xiàn)“水波紋”超出的了圓角邊框，如何解決這個(gè)問(wèn)題呢？Ink隆重登場(chǎng)。

Ink

Ink的官方解釋：

A convenience widget for drawing images and other decorations on [Material] widgets, so that [InkWell] and [InkResponse] splashes will render over them.

簡(jiǎn)單翻譯：Ink控件用于在[Material]控件上繪制圖像和其他裝飾，以便[InkWell]、[InkResponse]控件的“水波紋”效果在其上面顯示。

上面的問(wèn)題修改代碼如下：

Ink(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Color(0xFFDE2F21), Color(0xFFEC592F)]),
            borderRadius: BorderRadius.all(Radius.circular(20))),
        child: InkWell(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          child: Container(
            padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
            child: Text(
              '這是InkWell的點(diǎn)擊效果',
              style: TextStyle(color: Colors.white),
            ),
          ),
          onTap: () {},
        ),
      )

效果如下：

更多相關(guān)閱讀：

• Flutter系列文章總覽
• Flutter Widgets 之 Expanded和Flexible
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

如果這篇文章有幫助到您，希望您來(lái)個(gè)“贊”并關(guān)注我的公眾號(hào)，非常謝謝。