Flutter InkWell & Ink组件_flutter inkwell ios样式

Flutter InkWell & Ink组件

• InkWell组件可以在用户点击是出现水波纹效果。
• Ink组件可以将水波纹效果作用在装饰上。

InkWell(
    onTap: () {},
    splashColor: Colors.red,
    child: const Padding(
        padding: EdgeInsets.all(10),
        child: Text("InkWell水波纹效果"),
    ),
)
1
2
3
4
5
6
7
8

InkWell(
    onTap: () {},
    highlightColor: Colors.blue,
    child: const Padding(
        padding: EdgeInsets.all(10),
        child: Text("InkWell高亮效果"),
    ),
)
1
2
3
4
5
6
7
8

InkWell(
    onTap: () {},
    splashColor: Colors.red,
    highlightColor: Colors.blue,
    child: const Padding(
        padding: EdgeInsets.all(10),
        child: Text("InkWell混合效果"),
    ),
)
1
2
3
4
5
6
7
8
9

Ink(
    decoration: const BoxDecoration(
        gradient: LinearGradient(
            colors: [Color(0xFFDE2F21), Color(0xFFEC592F)],
        ),
        borderRadius: BorderRadius.all(Radius.circular(20)),
    ),
    child: InkWell(
        onTap: () {},
        borderRadius: const BorderRadius.all(Radius.circular(20)),
        child: Container(
            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
            child: const Text(
                "Ink&InkWell",
                style: TextStyle(color: Colors.white),
            ),
        ),
    ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19