如何管理 ListView flutter 中不同小部件的 state？

Question

我正在構建一個 Flutter 應用程序，其中使用 ListView 顯示列表。 它返回一個帶有用戶信息的 ListTile。 ListTile包含leading 、 title和subtitle ， trailing設置為ElevatedButton 。

這是它的樣子：

我想點擊“邀請按鈕”並更改ListTile的color 、 text和subtitle

點擊后，它應該是這樣的。

我怎樣才能做到這一點？ 這是我寫的代碼。 但它正在改變每個列表項的 state。

class InviteFriends extends StatefulWidget {
  const InviteFriends({Key? key}) : super(key: key);

  @override
  State<InviteFriends> createState() => _InviteFriendsState();
}

class _InviteFriendsState extends State<InviteFriends> {

  bool isSelected = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }
}

ListView.builder下的 UI：

                       ListTile(
                            title: const Text('Haris'),
                            subtitle: const Text(
                              isSelected ? 'Invitation Sent' : 'Not Invited Yet',
                            ),
                            leading: CircleAvatar(
                              backgroundImage: NetworkImage(
                                _userProfile!.profilePhoto.toString(),
                              ),
                            ),
                            trailing: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                elevation: 0.0,
                                primary: isSelected ? Colors.orange : Colors.green,
                                side: BorderSide.none,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10.0),
                                ),
                              ),
                              child: const Text(
                                isSelected ? 'Invited': 'Invite',
                              ),
                              onPressed: () {
                                setState(() {
                               isSelected = !isSelected;
                                });
                              },
                            ),
                          );

我還通過使用ValueKey(index)在 ListTile 中嘗試了 Keys，但它也不起作用。 我應該怎么辦？ 謝謝

Answer 1

將 Tile 作為單獨的 StatefulWidget 帶出，以便每個都有自己的 state。 不要修改 State List.builder。 並且您對所有 Tile 使用一個 isSelected 字段，並且您都將參考此條件。

請提供更多代碼，我可以提供幫助。 讓我了解全貌

Answer 2

您需要為 listtiles 創建不同的 class。 執行以下操作：

 ListView.builder(
        itemCount: 3,
        shrinkWrap: true,
        itemBuilder: (ctx, i) {
          return MyListItems();
        }))

然后是 MyListItems。

    class MyListItems extends StatefulWidget {
  @override
  MyListState createState() => MyListState();
}

class MyListState extends State<MyListItems> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: const Text('Haris'),
      subtitle: Text(
        isSelected ? "Invitation Sent" : 'Not Invited Yet',
      ),
      leading: const CircleAvatar(
        backgroundImage: NetworkImage(
            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYtfZRhbGQtq2BapB2MXJfWIO2QriO5Wx3qQ&usqp=CAU'),
      ),
     // use your image here
      trailing: ElevatedButton(
        style: ElevatedButton.styleFrom(
          elevation: 0.0,
          primary: isSelected ? Colors.orange : Colors.green,
          side: BorderSide.none,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
        child: Text(
          isSelected ? 'Invited' : 'Invite',
        ),
        onPressed: () {
          setState(() {
            isSelected = !isSelected;
          });
        },
      ),
    );
  }}

Answer 3

         return ListView.builder(
             itemCount: itemCount.length
              itemBuilder: (BuildContext context, int index) {
              return Friend(
              //arg if available
              );
    });

class Friend extends StatefulWidget {
  const Friend({Key? key}) : super(key: key);

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

class _FriendState extends State<Friend> {
  bool isSelected = false;
  @override
  Widget build(BuildContext context) {
//put ListTile detail here
    return Row(
      children: [
        FlatButton(//deprecated but other buttons work
               key: PageStorageKey('random num'),//if you are interested in keeping the state of the button while navigating
            onPressed: () {
              setState(() {
                isSelected = !isSelected;
              });
            },
            child: Text(isSelected ? "INVITED" : "INVITE"))
      ],
    );
  }
}

Answer 4

您創建一個列表，說“i”（變量）以了解每個圖塊的 state 並使用 false 進行初始化。 在抽頭更改時，state 為真。

final List<bool> selected = List.generate(20, (i) => false);

將列表“i”傳遞給 listview.builder，例如：-

            itemBuilder: (BuildContext context, i) 

查看完整代碼

import 'package:flutter/material.dart';

class InviteFriends extends StatefulWidget {
  const InviteFriends({Key? key}) : super(key: key);

  @override
  State<InviteFriends> createState() => _InviteFriendsState();
}

class _InviteFriendsState extends State<InviteFriends> {
  bool isSelected = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  final List<bool> selected = List.generate(20, (i) => false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 60),
        child: ListView.builder(
            // itemCount: i,
            itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: const Text('Haris'),
            subtitle: Text(
              selected[i] ? 'Invitation Sent' : 'Not Invited Yet',
            ),
            leading: const CircleAvatar(
              backgroundImage: AssetImage('assets/profile.gif'),
            ),
            trailing: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  elevation: 0.0,
                  primary: selected[i] ? Colors.orange : Colors.green,
                  side: BorderSide.none,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
                child: Text(
                  selected[i] ? 'Invited' : 'Invite',
                ),
                onPressed: () {
                  setState(() => selected[i] = !selected[i]);
                  // setState(() {
                  //   isSelected = !isSelected;
                  // });
                }),
          );
        }),
      ),
    );
  }
}

謝謝

Output