如何在 Flutter 上制作一个 onTap 切换图标来在两个“用户名”和“匿名”之间切换？

Question

我正在制作一个慈善应用程序项目，我正在努力弄清楚如何在有人提交捐款之前有一个匿名按钮。我希望在有人提交捐款之前以及在公共源上显示匿名选项，而没有人可以看到他们的用户名。就像 GoFundMe 的匿名切换按钮一样。

我尝试使用 setState 函数制作一个复选框小部件，以更改为公共提要上的 Users_tile。但我可以弄清楚为什么它不显示。我也尝试过使用 if/else 语句，但我无法弄清楚。

---

ListTile(
              leading: GestureDetector(
                onTap: () {},
                child: Row(
                  children: [
                    Icon(Icons.kayaking, size: 30,),
                      
                SizedBox(width: 4,),
                      
                //username
                Text(widget.post.username,               
                  style: TextStyle(
                    //color: AppColors.blue,
                    fontSize: 15,
                    //fontFamily: 'lexend'
                    ),
                  ),
                      
                  const Spacer(),
                      
                  // buttons -> more options: delete
                  GestureDetector(
                    onTap: () => _showOptions(),
                    child: Icon(Icons.more_horiz,color: AppColors.blue,
                    ),
                    )
                  ]
                )
             ),
            ),

            else...[ 

            ListTile(
              leading: GestureDetector(
                onTap: () {},
                child: Row(
                  children: [
                    Icon(Icons.skateboarding, size: 30,),
                      
                SizedBox(width: 4,),
                      
                //username
                Text('Anonymous',               
                  style: TextStyle(
                    //color: AppColors.blue,
                    fontSize: 15,
                    //fontFamily: 'lexend'
                    ),
                  ),
                      
                  const Spacer(),
                      
                  // buttons -> more options: delete
                  GestureDetector(
                    onTap: () {},
                    child: Icon(Icons.more_horiz,color: AppColors.blue,
                    ),
                    )
                  ]
                )
              ),
            ), 

            ],

                Checkbox(
                   value: anonCheck, 
                   // 53:39
                    onChanged: (bool? value) {
                     setState(() {
                       anonCheck = value;
                      });
                      },
                        //activeColor: AppColors.blue,
                        //checkColor: AppColors.white,
                                ),

我还放了我使用的复选框小部件。

如果有人可以提供帮助，将不胜感激

我尝试了带有 if/else 语句的布尔值，但无法让它工作。

Answer 1

为了因复选框交互而显示不同的文本值，我推荐这种方法。首先，我没有看到任何需要使用 if/else 语句，你可以只使用 Ternary Operator 来切换文本值。要了解有关三元运算符的更多信息，您可以使用此链接。除此之外，如果您使用

ListTile

，您可以在

Leading

、

title

和

trailing

三个位置处理您的小部件，因此在示例代码中，您可以省略

Row

小部件。我根据您提供的示例代码编写了一个示例代码，您可以在下面找到它：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _anonCheck = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            InkWell(
              onTap: () {},
              child: SizedBox(
                width: 300,
                child: ListTile(
                  leading: Icon(_anonCheck ? Icons.skateboarding : Icons.kayaking, size: 30),
                  title: Text(
                    _anonCheck ? 'Anonymous' : 'UserName',
                  ),
                  trailing: IconButton(
                    onPressed: () {},
                    icon: const Icon(Icons.more_horiz),
                    color: Colors.blue,
                  ),
                ),
              ),
            ),
            Checkbox(
              value: _anonCheck,
              onChanged: (value) => setState(() {
                _anonCheck = value!;
              }),
            )
          ],
        ),
      ),
    );
  }
}

如果您期望更多，请随时发表评论，我很乐意为您提供更多代码。