InkWell 用于小部件列表？

Posted 2023-02-23

【中文标题】InkWell 用于小部件列表？

【英文标题】：InkWell For a WIdget List?

【发布时间】：2020-05-24 04:19:37

【问题描述】：

我想为侧边栏添加墨水池动画，但我不想为每个项目添加它们是否有任何方法可以将墨水池添加到列表中的所有项目而无需一一进行，（我添加了它到第一个列表视图小部件）。 如果不可能，那么是否有任何小部件可以完成这项工作？谢谢

代码:)

class SideBar extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Drawer(
      child: Column(children: <Widget>[
        Container(
          width: double.infinity,
          padding: EdgeInsets.all(20),
          color: Theme.of(context).accentColor,
          child: Center(
              child: Column(
            children: <Widget>[
              Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                ),
              ),
            ],
          )),
        ),
        InkWell(
          onTap: () ,
          child: ListTile(
            leading: Icon(Icons.person),
            title: Text('Account'),
          ),
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
        ),
        ListTile(
          leading: Icon(Icons.transit_enterexit),
          title: Text('Exit'),
        ),
      ]),
    );
  

【参考方案1】：

ListTile 有一个onTap 参数，它将添加与InkWell 相同的动画

import 'package:flutter/material.dart';

void main() 
  return runApp(MyApp());


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


class MyHomePage extends StatelessWidget 
  @override
  Widget build(final BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text("My Home Page")),
      drawer: MyDrawer(),
      body: Center(child: const Text("My Home Page")),
    );
  


class MyDrawer extends StatelessWidget 
  @override
  Widget build(final BuildContext context) 
    return Drawer(
      child: Column(children: <Widget>[
        ListTile(
          leading: const Icon(Icons.person),
          title: const Text('Account'),
          onTap: () ,
        ),
        ListTile(
          leading: const Icon(Icons.settings),
          title: const Text('Settings'),
          onTap: () ,
        ),
      ]),
    );
  

【讨论】：

非常澄清，在文档中没有找到这个信息（当然我看起来不太好）。我知道为什么，但我的没有显示任何动画，甚至尝试用 InkWell 拥抱每个 ListTile 但这并没有解决问题