dart - Flutter FlatButton 不显示点击动画/波纹效果

Question

我有以下代码:

return new ListTile(
                          leading: new CircleAvatar(
                              backgroundColor: Colors.blue,
                              child: new Image.network(
                                  "http://res.cloudinary.com/kennyy/image/upload/v1531317427/avatar_z1rc6f.png")),
                          title: new Row(
                            children: <Widget>[
                              new Expanded(child: new Text(message)),
                              new FlatButton(onPressed: null, child: new Text("Delete"))
                            ]
                          ),
                          subtitle: new Text(from),
                        );

它在我的 ListView 中创建了一个磁贴。每个图 block 都应该有一个按钮。当我点击按钮时 - 我没有看到我实际点击的任何波纹效果或动画。我很确定它是 Material 主题的一部分，作为 FlatButtons 的手势，但我尝试了一个我找到的解决方案，使用 InkWell:

return new ListTile(
                          leading: new CircleAvatar(
                              backgroundColor: Colors.blue,
                              child: new Image.network(
                                  "http://res.cloudinary.com/kennyy/image/upload/v1531317427/avatar_z1rc6f.png")),
                          title: new Row(
                            children: <Widget>[
                              new Expanded(child: new Text(message)),
                              InkWell(
                                  child: FlatButton(onPressed: null, child: new Text("Delete"), color: Colors.amber))
                            ]
                          ),
                          subtitle: new Text(from),
                        );

但仍然 - 我的 ListView 按钮在点击时没有任何链式 react 。

有什么想法吗？

Answer 1

默认情况下禁用 Flutter 按钮。要启用按钮，请设置其 onPressed或 onLongPress属性为非空值。

波纹不可见，因为您已将 onPressed 的属性设置为 null。

new FlatButton(onPressed: null, child: new Text("Delete"))

将 onPressed 属性更改为如下内容:

new FlatButton(onPressed: (){}, child: new Text("Delete"))

此处要比较的是非空 onPressed 和 null 值 onPressed 的示例。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListTile(
        leading: new CircleAvatar(
            backgroundColor: Colors.blue,
            child: new Image.network(
                "http://res.cloudinary.com/kennyy/image/upload/v1531317427/avatar_z1rc6f.png")),
        title: new Row(children: <Widget>[
          //new Expanded(child: new Text(message)),
          new TextButton(
            onPressed: () {},
            child: new Text("Delete"),
          ),
          new TextButton(
            onPressed: null,
            child: new Text("Delete"),
          )
        ]),
        //subtitle: new Text(from),
      ),
    );
  }
}

*请注意 FlatButton现在已弃用，所以我使用了 TextButton在示例中。