Flutter中选择RadioListTile后隐藏单选框仅保留标题的实现方法

核心思路是根据选项的选中状态，动态切换显示RadioListTile组件或纯文本Text组件。以下是针对你提供的代码修改后的完整实现：

Column(
  children: [
    // 主选项：根据选中状态切换显示
    selectedRadioGroup1 == 1
        ? Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            child: Text(
              'Option 1',
              style: TextStyle(
                color: CustomColors.primary,
                // 补充和RadioListTile标题一致的字体样式，保证UI统一
                fontSize: 16,
                fontWeight: FontWeight.w400,
              ),
            ),
          )
        : RadioListTile(
            fillColor: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
              return CustomColors.primary;
            }),
            title: Text(
              'Option 1',
              style: TextStyle(
                  color:
                      selectedRadioGroup1 == 1 ? CustomColors.primary : null),
            ),
            value: 1,
            groupValue: selectedRadioGroup1,
            onChanged: (value) {
              setState(() {
                selectedRadioGroup1 = value;
                nestedSelectedRadioGroup1 = null; // 重置嵌套选项选中状态
              });
            },
          ),
    if (selectedRadioGroup1 == 1)
      Padding(
        padding: const EdgeInsets.only(left: 15.0),
        child: Column(
          children: [
            // 嵌套选项A：根据选中状态切换显示
            nestedSelectedRadioGroup1 == 3
                ? Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                    child: Text(
                      'Nested Option A',
                      style: TextStyle(
                        color: CustomColors.primary,
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  )
                : RadioListTile(
                    title: const Text('Nested Option A'),
                    value: 3,
                    groupValue: nestedSelectedRadioGroup1,
                    onChanged: (value) {
                      setState(() {
                        nestedSelectedRadioGroup1 = value;
                      });
                    },
                  ),
            // 嵌套选项B：根据选中状态切换显示
            nestedSelectedRadioGroup1 == 4
                ? Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                    child: Text(
                      'Nested Option B',
                      style: TextStyle(
                        color: CustomColors.primary,
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  )
                : RadioListTile(
                    title: const Text('Nested Option B'),
                    value: 4,
                    groupValue: nestedSelectedRadioGroup1,
                    onChanged: (value) {
                      setState(() {
                        nestedSelectedRadioGroup1 = value;
                      });
                    },
                  ),
          ],
        ),
      ),
  ],
),

关键说明： #

• 动态组件切换：通过判断选中状态（如selectedRadioGroup1 == 1），决定渲染交互型的RadioListTile还是仅展示文本的Text组件。
• UI一致性处理：给纯文本添加与RadioListTile标题一致的内边距和字体样式，避免切换视图后出现布局或样式突兀变化。
• 状态驱动更新：保留原有的setState逻辑，确保选中状态变化时能触发组件重新渲染，自动完成视图切换。

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