Flutter中展开的TabView下如何获取行方向的Radio？

Question

我是 Flutter 的新手。我正在为大学工作建立一个项目。我想要在行方向上有单选按钮，如下图所示。但是，我遇到了渲染溢出、断言错误等问题。在我放置右侧（单选按钮行）之前，没有错误。添加单选按钮行后，布局消失。我已经用我所知道的一切知识进行了尝试。请指导我如何构建以下布局。布局设计

下面只是我试图了解布局的代码的一部分。下面的代码没有错误，但这只是示例代码，可以知道错误在哪里。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:rootine/components/reminder_list.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>[
        Text(
          'Edit Reminders',
          style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: Color(0xff5B7A49)),
        ),
        Container(
          height: 300,
          color: Colors.teal,
          child: ListView(
            children: [
              //PestControl
              ListTile(
                title: Row(
                  children: [
                    Icon(
                      Icons.pest_control,
                      color: Color(0xffBB64D9),
                      size: 16,
                    ),
                    Text(
                      'Pest control',
                      style: TextStyle(color: Color(0xff5B7A49), fontSize: 12),
                    )
                  ],
                ),
                trailing: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Container(
                      width: 200,
                      color: Colors.white,
                      child: Text('Hello'),
                    ),
                    Container(
                      color: Colors.yellow,
                      width: 200,
                      child: Text('Hello'),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

我为你做了一些调整；尽管如此，为了避免完全复制它并允许您查看代码的某些部分（复制粘贴会阻碍您的开发），我小心地保留了某些元素。我希望它有帮助！

class MyWidget extends StatefulWidget {
  final String title;
  final List<String> dropdownValues;
  final ValueChanged<String>? onChangeDropdown;
  final ValueChanged<String>? onChangeDateType;

  MyWidget({
    Key? key,
    required this.title,
    required this.dropdownValues,
    this.onChangeDropdown,
    this.onChangeDateType,
  })  : assert(dropdownValues.isNotEmpty, 'Please provide a valid List'),
        super(key: key);

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

class _MyWidgetState extends State<MyWidget> {
  List<String> dateTypes = ['Daily', 'Weekly', 'Monthly', 'None'];
  late String _frequency;
  late String _day;

  @override
  void initState() {
    super.initState();
    _frequency = dateTypes.first;
    _day = widget.dropdownValues.first;
  }

  void _onChangeDateType(String? value) {
    if (value != null) {
      setState(() {
        _frequency = value;
      });
      if (widget.onChangeDateType != null) {
        widget.onChangeDateType!(value);
      }
    }
  }

  void _onChangeDropdown(String? value) {
    if (value != null) {
      setState(() {
        _day = value;
      });
      if (widget.onChangeDropdown != null) {
        widget.onChangeDropdown!(value);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        children: [
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Icon(Icons.bug_report, color: Colors.purple),
                const SizedBox(width: 8),
                Text(
                  widget.title,
                  style: const TextStyle(
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 3,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Radio<String>(
                      value: 'Daily',
                      groupValue: _frequency,
                      onChanged: _onChangeDateType,
                    ),
                    const Text('Daily'),
                    Radio<String>(
                      value: 'Weekly',
                      groupValue: _frequency,
                      onChanged: _onChangeDateType,
                    ),
                    const Text('Weekly'),
                    Radio<String>(
                      value: 'Monthly',
                      groupValue: _frequency,
                      onChanged: _onChangeDateType,
                    ),
                    const Text('Monthly'),
                    Radio<String>(
                      value: 'None',
                      groupValue: _frequency,
                      onChanged: _onChangeDateType,
                    ),
                    const Text('None'),
                  ],
                ),
                if (_frequency == 'Weekly')
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0),
                    child: DropdownButtonFormField<String>(
                      value: _day,
                      onChanged: _onChangeDropdown,
                      decoration: const InputDecoration(
                        contentPadding: EdgeInsets.symmetric(horizontal: 10),
                        border: OutlineInputBorder(),
                      ),
                      items: widget.dropdownValues.map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList(),
                    ),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}