如何使用Flutter实现该筛选器UI及相关布局问题？

一、缩小 TextField 的宽度 #

在 Row 组件中控制 TextField 宽度，常用两种实用方式：

1. 使用 Flexible/Expanded 按比例分配宽度 #

通过 flex 属性定义 TextField 在 Row 中的占比，适配不同屏幕尺寸：

Row(
  children: [
    // 下拉选择按钮
    DropdownButton<String>(
      value: '默认选项',
      items: ['选项1', '选项2'].map((item) => DropdownMenuItem(value: item, child: Text(item))).toList(),
      onChanged: (newVal) {},
    ),
    SizedBox(width: 8), // 组件间距
    // 按占比缩小 TextField
    Flexible(
      flex: 1, // 数值越小，宽度占比越低，可按需调整
      child: TextField(
        decoration: InputDecoration(hintText: '输入内容'),
      ),
    ),
    Icon(Icons.search),
  ],
)

2. 直接固定宽度 #

如果需要固定宽度，用 SizedBox 包裹 TextField 即可：

Row(
  children: [
    DropdownButton<String>(...),
    SizedBox(width: 8),
    SizedBox(
      width: 180, // 自定义固定宽度
      child: TextField(decoration: InputDecoration(hintText: '输入内容')),
    ),
    Icon(Icons.search),
  ],
)

二、让 Container 与 TextField 高度一致 #

TextField 的高度由 InputDecoration 的内边距、紧凑模式等属性决定，可通过以下方式实现高度对齐：

1. 用 IntrinsicHeight 强制子组件高度统一 #

IntrinsicHeight 会让 Row 内所有子组件高度自动匹配最高的元素（此处为 TextField）：

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Flexible(
        flex: 1,
        child: TextField(
          decoration: InputDecoration(
            hintText: '输入内容',
            border: OutlineInputBorder(), // 显示边框方便观察高度对齐效果
            isDense: true, // 启用紧凑模式，减少多余空白
            contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 12),
          ),
        ),
      ),
      SizedBox(width: 8),
      // Container 自动匹配 TextField 高度
      Container(
        width: 45,
        decoration: BoxDecoration(
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(4),
        ),
        child: Center(child: Icon(Icons.search)),
      ),
    ],
  ),
)

2. 手动同步高度参数 #

TextField 默认高度约为 48dp，给 Container 设置相同高度，同时调整 TextField 内边距让视觉对齐：

Row(
  children: [
    DropdownButton<String>(...),
    SizedBox(width: 8),
    SizedBox(
      width: 180,
      height: 48, // 匹配 TextField 默认高度
      child: TextField(
        decoration: InputDecoration(
          hintText: '输入内容',
          border: OutlineInputBorder(),
          contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 12),
        ),
      ),
    ),
    SizedBox(width: 8),
    SizedBox(
      height: 48, // 与 TextField 高度保持一致
      width: 45,
      child: Container(
        color: Colors.grey[200],
        child: Center(child: Icon(Icons.search)),
      ),
    ),
  ],
)

3. 复用 TextField 的内边距参数 #

如果给 TextField 设置了 contentPadding，给 Container 设置相同的 padding，让两者的可交互区域高度一致：

Row(
  children: [
    Flexible(
      flex: 1,
      child: TextField(
        decoration: InputDecoration(
          hintText: '输入内容',
          isDense: true,
          contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 10),
          border: OutlineInputBorder(),
        ),
      ),
    ),
    SizedBox(width: 8),
    Container(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 10), // 与 TextField 内边距完全一致
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(4),
      ),
      child: Icon(Icons.search),
    ),
  ],
)

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