flutter - ListTile 小部件 : No splash effect when a color is defined

Question

在我的项目中，我有一个 ListTile 列表，我需要为其应用背景色。通过应用颜色，ListTiles 失去了 onTap 飞溅效果。

• 我尝试使用 ListTiles 的 tileColor 属性来实现背景色
• 并且我尝试通过将 ListTile 传递给子级来在 Container 中实现背景色，但没有成功

// 1 (splash effect working)
ListTile(title: Text("ListTile without color"), onTap: () {}),


// 2 (splash no effect working)
ListTile(
         tileColor: Colors.blue,
         title: Text("ListTile with color"),
         onTap: () {}),


// 3 (splash no effect working)
Container(
         color: Colors.blue,
         child: ListTile(
         title: Text(
                    "ListTile without color in container with color"),
                     onTap: () {}))

完整示例:

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[700],
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Container(
              width: 400,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  // 1 (splash effect working)
                  ListTile(title: Text("ListTile without color"), onTap: () {}),
                  // 2 (splash no effect working)
                  ListTile(
                      tileColor: Colors.blue,
                      title: Text("ListTile with color"),
                      onTap: () {}),
                  // 3 (splash no effect working)
                  Container(
                      color: Colors.blue,
                      child: ListTile(
                          title: Text(
                              "ListTile without color in container with color"),
                          onTap: () {}))
                ],
              )),
        ));
  }
}

Answer 1

一种解决方案是使用 Material和 InkWell类如下:

  Widget _buildTile({                                                                                                                                          
     Widget title,                                                                                                                                              
     Color tileColor,                                                                                                                                           
     Color splashColor,                                                                                                                                         
     Function onTap,                                                                                                                                            
   }) {                                                                                                                                                         
     return Material(                                                                                                                                           
       color: tileColor,                                                                                                                                        
       child: InkWell(                                                                                                                                          
         splashColor: splashColor,                                                                                                                              
         onTap: onTap,                                                                                                                                          
         child: ListTile(                                                                                                                                       
           title: title,                                                                                                                                  
         ), // ListTile                                                                                                                                         
       ), // InkWell                                                                                                                                            
     ); // Material                                                                                                                                             
   }

完整示例:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Widget _buildTile({                                                                                                                                          
     Widget title,                                                                                                                                              
     Color tileColor,                                                                                                                                           
     Color splashColor,                                                                                                                                         
     Function onTap,                                                                                                                                            
   }) {                                                                                                                                                         
     return Material(                                                                                                                                           
       color: tileColor,                                                                                                                                        
       child: InkWell(                                                                                                                                          
         splashColor: splashColor,                                                                                                                              
         onTap: onTap,                                                                                                                                          
         child: ListTile(                                                                                                                                       
           title: title,                                                                                                                                  
         ), // ListTile                                                                                                                                         
       ), // InkWell                                                                                                                                            
     ); // Material                                                                                                                                             
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[700],
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Container(
              width: 400,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  _buildTile(
                      tileColor: Colors.blue,
                      splashColor: Colors.black,
                      title: Text("ListTile with color"),
                      onTap: () {}),
                ],
              )),
        ));
    }
}