Flutter：尝试使用 OnTap 突出显示 ListTile答案

【问题标题】：Flutter: Trying to highlight a ListTile using OnTapFlutter：尝试使用 OnTap 突出显示 ListTile
【发布时间】：2020-01-27 05:03:31
【问题描述】：

我试图弄清楚如何突出显示选定的 ListTile，因此我只编辑数据库中突出显示的 Tiles 的值。

一些上下文代码以备不时之需。

User_List.dart

class UserList extends StatefulWidget {
  @override
  _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
  @override
  Widget build(BuildContext context) {

    final users = Provider.of<List<Camper>>(context) ?? [];

    return ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index){
        return UserTile(user: users[index]);
      },
    );
  }
}

下面是我试图让 OnTap 工作的代码。

User_Tile.dart

class UserTile extends StatelessWidget {

  final Camper user;
  UserTile({this.user});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 8.0),
        child: Card(
          elevation: 10.0,
          color: Colors.blue[100],
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          margin: EdgeInsets.fromLTRB(20.0, 6.0, 20.0, 0.0),
          child: ListTile(
            leading: Text('ID: ${user.camperID}'),
            title: Text(user.name),
            subtitle: Text(user.instrument),
            //Dense compacts the text together more
            dense: true,
            trailing: Text(user.band + ' Band'),

          ),
        ),
    );
  }
}

我使用 onTap 或 onPressed 的大多数尝试都失败了，而且我对 Flutter 的经验不够，所以我想我会在这里问一下，看看是否有人知道。

如果您需要我提供更多信息，请告诉我。谢谢。

【问题讨论】：

标签： database flutter

【解决方案1】：

使用statefulwidget 而不是statelesswidget

class UserList extends StatefulWidget {
  @override
  _UserListState createState() => _UserListState();
}

class _UserListState extends State<UserList> {
  @override
  Widget build(BuildContext context) {

    int selectedIndex = 0;
    final users = Provider.of<List<Camper>>(context) ?? [];

    return ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index){
        return Padding(
          padding: EdgeInsets.only(top: 8.0),
          child: Card(
            elevation: 10.0,
            color: Colors.blue[100],
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            margin: EdgeInsets.fromLTRB(20.0, 6.0, 20.0, 0.0),
            child: Container(
              child: ListView.builder(
                  padding: EdgeInsets.only(left: 10.0),
                  itemCount: users.length,
                  itemBuilder: (BuildContext context, int index) {
                    return GestureDetector(
                      onTap: () {
                        setState(() {
                          selectedIndex = index;
                        });
                      },
                      child: ListTile(
                        leading: Text('ID: ${users.camperID}'),
                        title: Text(users.name,style: TextStyle(
                            color: index == selectedIndex
                                ? Colors.white
                                : Colors.white60,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0,
                            letterSpacing: 1.2),),
                        subtitle: Text(users.instrument),
                        //Dense compacts the text together more
                        dense: true,
                        trailing: Text(users.band + ' Band'),
                      ),
                    );
                  }
              ),
            ),
          ),
        );
      },
    );
  }
}

【讨论】：

当我使用此代码时，我的所有“用户”数据都变为未定义。我忘记将我的代码的另一部分添加到问题中，因为我认为不需要它，但是如果您想看一下，现在就添加它。感谢您的帮助。
似乎我的用户数据的数据部分现在无效。例如，“users.camperID”现在将 camperID 作为错误出现。不太清楚为什么，但仔细查看所有内容，对我来说似乎并不明显为什么它现在会产生错误。

【解决方案2】：

您是否尝试将其包装在手势检测器中？

【讨论】：

我可以将 GestureDetector 添加到它，但我不确定如何通过点击来突出显示它。
让它成为一个有状态的小部件，当手势检测器被点击时，让它将一个参数从真更改为假，然后调用设置状态函数。
还要确保根据该参数评估颜色。

【解决方案3】：

做到这一点的最快方法是将ListTile 包裹在ListView 内并使用ListTile 属性onTap() 提供，因为没有它就不会产生实质性的涟漪效应，而且您还需要使您的Listview 元素收缩包装添加shrinkwrap: true 所以它只占用所需的空间 n 不会占用所有空间，您可以为每个 ListTile 项目赋予一个 ink 属性，该属性可以采用任何您想要的不同颜色。我知道答案为时已晚，但这是最简单的方法，可能对其他人有所帮助，

试试下面的代码，

ListView( shrinkWrap: true,
              children: <Widget>[
                ListTile(
                  onTap: () {},
                  leading: Icon(
                    Icons.home,
                    color: Colors.black,
                  ),
                  title: Text('Home'),
                ),],
            ),

【讨论】：