Flutter实现含TextField与堆叠单选按钮的Row布局求助

你需要把TextField和两个RadioListTile整合到同一个Row布局里，右侧用Column垂直堆叠选项，同时调整字体大小和布局间距，以下是修改后的完整代码：

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // 左侧年份输入框，占主要宽度
    Flexible(
      flex: 3,
      child: TextField(
        focusNode: inputNode,
        autofocus: true,
        keyboardType: const TextInputType.numberWithOptions(),
        controller: yearController,
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: "输入事件年份",
        ),
      ),
    ),
    const SizedBox(width: 16), // 输入框与选项区的横向间距
    // 右侧垂直堆叠的AD/BC单选选项
    Flexible(
      flex: 1,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          RadioListTile<Era>(
            contentPadding: EdgeInsets.zero, // 移除默认内边距，减少空白
            dense: true, // 启用紧凑模式，缩小行高
            title: const Text('A.D.', style: TextStyle(fontSize: 12)), // 设置小字体
            value: Era.ad,
            groupValue: _era,
            onChanged: (Era? value) {
              setState(() {
                _era = value;
              });
            },
          ),
          RadioListTile<Era>(
            contentPadding: EdgeInsets.zero,
            dense: true,
            title: const Text('B.C.', style: TextStyle(fontSize: 12)),
            value: Era.bc,
            groupValue: _era,
            onChanged: (Era? value) {
              setState(() {
                _era = value;
              });
            },
          ),
        ],
      ),
    ),
  ],
)

关键调整说明： #

• 整体用Row包裹输入框和选项区，通过Flexible的flex属性分配两者的宽度比例
• 右侧用Column实现两个RadioListTile的垂直堆叠
• 给Text组件添加fontSize属性缩小字体（可根据需求调整数值）
• 设置RadioListTile的contentPadding: EdgeInsets.zero和dense: true，去除默认的多余间距，让布局更紧凑
• 用SizedBox控制输入框与选项区之间的横向间距

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