如何在 Flutter 中制作带有文本字段和两个堆叠单选按钮的行？

Question

我有一个

TextField

用于输入年份，两个

RadioListTiles

用于输入公元或公元前。 我想要一个

Row

和

TextField

，然后是

RadioListTiles

，然后以较小的字体大小堆叠。 有人可以帮忙吗？

这是现在的样子：

这是代码：

          TextField(
              focusNode: inputNode,
              autofocus: true,
              keyboardType: const TextInputType.numberWithOptions(),
              controller: yearController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: "Enter the Year of the Event",
              )),

          Row(
            children: [
          
              Flexible(
                child: RadioListTile<Era>(
                  title: const Text('A.D.'),
                  value: Era.ad,
                  groupValue: _era,
                  onChanged: (Era? value) {
                    setState(() {
                        _era = value;
                      });
                  },
                ),
          
              ),
          
              Flexible(
              child: RadioListTile<Era>(
                title: const Text('B.C.'),
                value: Era.bc,
                groupValue: _era,
                onChanged: (Era? value) {
                  setState(() {
                      _era = value;
                    });
                },
                ),
              ),
          
            ],
          ),

Answer 1

您可以执行以下操作以首先显示文本字段，并确保将文本字段包装在 Expanded 中，以将其限制为可用空间。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(
      child: TextField(
        autofocus: true,
        keyboardType: const TextInputType.numberWithOptions(),
        controller: yearController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: "Enter the Year of the Event",
        ),
      ),
    ),
    _buildRadio('A.D.', Era.ad),
    _buildRadio('B.C.', Era.bc),
  ],
),

此外，将 Radio 与 Row 和 Text 小部件结合使用，以便在小视图中正确显示它们，因为 RadioListTile 带有大量默认填充和其他不需要的配置。

Radio<Era>(
  value: value,
  groupValue: _era,
  onChanged: (Era? value) {
    setState(() {
      _era = value;
    });
  },
),
Text(
  label,
  style: TextStyle(
    fontSize: 10,
  ),
),