flutter 如何添加飞溅的颜色或涟漪效果的图标或高架桥

vqlkdk9b  于 2023-11-21  发布在  Flutter
关注(0)|答案(3)|浏览(123)

在这个屏幕上有一个iconButton,一个麦克风,用户在重复一个单词之前必须点击它。我在IconButton的属性中添加了splashcolor,但是当用户点击时什么都不显示。工具提示也是一样。
我注意到在其他屏幕上我的升高按钮的随机行为,有时我们看到涟漪效应,有时我们不.有什么我做错了吗?我在论坛上读到,有时这些效果发生“下”另一个小部件,所以我们不能看到他们.
有没有关于如何使用效果的规则?
代码如下:

SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(12.0),
            child: Text(
              'Ecoute et répète 5 fois le mot en anglais.',
              style: TextStyle(color: Colors.indigo[700], fontSize: 17),
            ),
          ),
          Container(
            margin: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                width: 1.0,
              ),
              borderRadius: BorderRadius.circular(10.0),
            ),
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                Container(
                  height: 200,
                  child: Image.asset(
                    'images/avatar_teacher.jpeg',
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(3.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        child: Text(
                          'An adult',
                          style: TextStyle(
                            color: Colors.red[900],
                            fontSize: 23,
                          ),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(bottom: 60),
                        child: Text(
                          'Un adulte',
                          style: TextStyle(
                            color: Colors.indigo[900],
                            fontSize: 15,
                          ),
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          height: 45,
                          margin: EdgeInsets.fromLTRB(0, 5.0, 0, 15.0),
                          alignment: Alignment.topRight,
                          child: Icon(
                            Icons.volume_up,
                            color: Colors.indigo[500],
                            size: 55.0,
                          ),
                        ),
                        onTap: () {
                          Tts.speak(phrase: 'little', langue: Language.english);
                        },
                      ),
                      Container(
                        alignment: Alignment.topRight,
                        child: Text('/adult/'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: Center(
              child: IconButton(
                  iconSize: 80,
                  splashRadius: 120,
                  splashColor: Colors.green,
                  tooltip: 'Répète le mot',
                  icon: Icon(
                    Icons.mic,
                    color: Colors.red[900],
                  ),
                  onPressed: () {
                    uD.checkSpokenWords('adult', reussite);
                  }),
            ),
          ),
          Container(
            alignment: Alignment.center,
            child: Text(
              'Clique sur le micro et répète le mot',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.black45,
                fontSize: 15.0,
              ),
            ),
          ),
          SizedBox(
            height: 2.0,
          ),
          Visibility(
            visible: false,
            child: Container(
              width: double.infinity,
              alignment: Alignment.centerLeft,
              margin: const EdgeInsets.only(top: 12),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(
                  width: 1.0,
                ),
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: [
                    Text('Voici ce que j\'ai compris : '),
                    Text(uD.spokenWords),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );

字符串

62lalag4

62lalag41#

要更改Elevated Button飞溅颜色,只需使用ButtonStyle中的overlayColor属性即可

ElevatedButton(
        style: ButtonStyle(
                  
           overlayColor: MaterialStateProperty.all(Colors.green),

           backgroundColor: MaterialStateProperty.all(Colors.black),
                  
        ),
        onPressed: () {
           //foobar
        },
        child: Icon(
           Icons.call,
           color: Colors.blue,
        ),
    ),

字符串

zi8p0yeb

zi8p0yeb2#

你需要像这样用一个Material小部件 Package 你的IconButton小部件:

Container(
                color: Colors.white,
                child: Center(
                  child: Material(
                    color: Colors.transparent,
                    child: IconButton(
                        iconSize: 80,
                        splashRadius: 120,
                        splashColor: Colors.green,
                        tooltip: 'Répète le mot',
                        icon: Icon(
                          Icons.mic,
                          color: Colors.red[900],
                        ),
                        onPressed: () {
                          print('test');
                        }),
                  ),
                ),
              ),

字符串
飞溅和涟漪只显示如果他们是在某种类型的材料部件(如卡)。

ukqbszuj

ukqbszuj3#

要使splashColor背景在IconButton后面为圆形,请添加以下代码:

Material(
       color: Colors.transparent,
       clipBehavior: Clip.hardEdge,
       borderRadius: BorderRadius.circular(50),
       child: IconButton(
       splashColor: Colors.black.withOpacity(0.8),

字符串

相关问题