Flutter中如何在展开的TabView下方实现横向单选按钮

针对你遇到的横向单选按钮渲染溢出、布局消失问题，核心原因是固定宽度容器超出ListTile可用空间，加上单选按钮组后进一步挤占布局，导致断言错误。以下是具体修复方案：

关键修改点 #

• 移除Trailing中固定宽度的Container，改用Flexible适配空间
• 用Row配合Radio组件实现横向单选按钮组，绑定选中状态
• 确保单选组在有限空间内自适应，避免强制宽度导致溢出

修复后完整代码 #

import 'package:flutter/material.dart';

List<String> periodicity = [
  'Daily',
  'Weekly',
  'Monthly',
  'None',
];

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

  @override
  State<EditReminders> createState() => _EditRemindersState();
}

class _EditRemindersState extends State<EditReminders> {
  String currentPeriod = 'None';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const Text(
          'Edit Reminders',
          style: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.bold,
            color: Color(0xff5B7A49),
          ),
        ),
        Container(
          height: 300,
          color: Colors.teal,
          child: ListView(
            children: [
              // PestControl 提醒项
              ListTile(
                contentPadding: const EdgeInsets.symmetric(horizontal: 12),
                title: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    Icon(
                      Icons.pest_control,
                      color: Color(0xffBB64D9),
                      size: 16,
                    ),
                    SizedBox(width: 8),
                    Text(
                      'Pest control',
                      style: TextStyle(
                        color: Color(0xff5B7A49),
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
                trailing: Flexible(
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: periodicity.map((period) {
                      return Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Radio<String>(
                            value: period,
                            groupValue: currentPeriod,
                            onChanged: (value) {
                              setState(() {
                                currentPeriod = value!;
                              });
                            },
                            activeColor: const Color(0xff5B7A49),
                          ),
                          Text(
                            period,
                            style: const TextStyle(fontSize: 12),
                          ),
                        ],
                      );
                    }).toList(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

补充优化方案 #

如果单选选项过多仍有溢出，可将Trailing的Row替换为横向滚动组件：

trailing: SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    // 原有单选组代码
  ),
),

内容的提问来源于stack exchange，提问作者Kaung Myat Tun