Flutter中红点可见性控制求助：点击选项显示/隐藏红点

Flutter中没有直接的visible属性用于控件显示隐藏控制，你可以通过以下两种方案实现需求：

方案一：使用Visibility组件控制显示 #

维护一个状态变量记录选中的选项索引，点击选项时更新状态，通过Visibility组件的visible属性判断红点是否显示。

示例代码：

import 'package:flutter/material.dart';

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

  @override
  State<RedDotDemo> createState() => _RedDotDemoState();
}

class _RedDotDemoState extends State<RedDotDemo> {
  // 记录选中的选项索引，null表示未选中任何选项
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('红点切换示例')),
      body: Column(
        children: [
          // 选项1
          ListTile(
            title: const Text('选项1'),
            trailing: Visibility(
              visible: selectedIndex == 0,
              child: Container(
                width: 10,
                height: 10,
                decoration: const BoxDecoration(
                  color: Colors.red,
                  shape: BoxShape.circle,
                ),
              ),
            ),
            onTap: () {
              setState(() {
                selectedIndex = 0;
              });
            },
          ),
          // 选项2
          ListTile(
            title: const Text('选项2'),
            trailing: Visibility(
              visible: selectedIndex == 1,
              child: Container(
                width: 10,
                height: 10,
                decoration: const BoxDecoration(
                  color: Colors.red,
                  shape: BoxShape.circle,
                ),
              ),
            ),
            onTap: () {
              setState(() {
                selectedIndex = 1;
              });
            },
          ),
          // 选项3
          ListTile(
            title: const Text('选项3'),
            trailing: Visibility(
              visible: selectedIndex == 2,
              child: Container(
                width: 10,
                height: 10,
                decoration: const BoxDecoration(
                  color: Colors.red,
                  shape: BoxShape.circle,
                ),
              ),
            ),
            onTap: () {
              setState(() {
                selectedIndex = 2;
              });
            },
          ),
        ],
      ),
    );
  }
}

方案二：条件渲染（直接返回控件或null） #

当选项被选中时返回红点容器，未选中时返回null，这种方式更简洁直观。

示例代码：

import 'package:flutter/material.dart';

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

  @override
  State<RedDotDemo> createState() => _RedDotDemoState();
}

class _RedDotDemoState extends State<RedDotDemo> {
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('红点切换示例')),
      body: Column(
        children: [
          ListTile(
            title: const Text('选项1'),
            trailing: selectedIndex == 0
                ? Container(
                    width: 10,
                    height: 10,
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                  )
                : null,
            onTap: () => setState(() => selectedIndex = 0),
          ),
          ListTile(
            title: const Text('选项2'),
            trailing: selectedIndex == 1
                ? Container(
                    width: 10,
                    height: 10,
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                  )
                : null,
            onTap: () => setState(() => selectedIndex = 1),
          ),
          ListTile(
            title: const Text('选项3'),
            trailing: selectedIndex == 2
                ? Container(
                    width: 10,
                    height: 10,
                    decoration: const BoxDecoration(
                      color: Colors.red,
                      shape: BoxShape.circle,
                    ),
                  )
                : null,
            onTap: () => setState(() => selectedIndex = 2),
          ),
        ],
      ),
    );
  }
}

关键提示 #

• 核心逻辑是通过setState更新状态变量，触发UI重绘
• 不要尝试使用控件原生的visible属性（Flutter多数控件无此属性），优先用上述两种方式控制显示隐藏
• 若需要支持多选，可将selectedIndex改为Set<int>类型，点击时添加/移除索引，判断时用selectedSet.contains(index)

内容的提问来源于stack exchange，提问作者Pranav Ratusaria