如何实现带独立搜索按钮的搜索栏？Flutter开发技术求助

修改后的完整代码 #

Container(
  width: 1120,
  alignment: Alignment.topRight,
  child: SizedBox(
    width: 310,
    height: 40,
    child: Row(
      children: [
        // 搜索输入框
        Expanded(
          child: TextFormField(
            decoration: InputDecoration(
              hintText: 'Search Document',
              contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 15),
              // 调整输入框边框，仅保留左/上/下边框+左上/左下圆角
              border: OutlineInputBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(4),
                  bottomLeft: Radius.circular(4),
                ),
                borderSide: BorderSide(color: Colors.grey),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(4),
                  bottomLeft: Radius.circular(4),
                ),
                borderSide: BorderSide(color: Colors.grey),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(4),
                  bottomLeft: Radius.circular(4),
                ),
                borderSide: BorderSide(color: Colors.blue),
              ),
            ),
          ),
        ),
        // 独立搜索按钮
        SizedBox(
          height: 40,
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.zero,
              backgroundColor: Colors.blue,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(4),
                  bottomRight: Radius.circular(4),
                ),
              ),
              minimumSize: Size(40, 40),
            ),
            onPressed: () {
              // 此处添加搜索逻辑
            },
            child: Icon(
              Icons.search,
              color: Colors.white,
              size: 25,
            ),
          ),
        ),
      ],
    ),
  ),
)

核心修改点 #

• 布局重构：用Row组件将输入框与搜索按钮横向拆分，替代原有的suffixIcon内嵌方案
• 视觉衔接优化：通过圆角设置让输入框与按钮的边框无缝衔接，避免内嵌按钮的割裂感
• 按钮样式匹配：用ElevatedButton实现带背景色的独立按钮，尺寸与输入框高度完全对齐
• 冗余代码清理：删除原代码中重复的Container结构，简化布局层级

可选调整 #

如果需要输入框与按钮之间有细微分隔，可在Row的children之间添加SizedBox(width: 1)，或调整边框颜色实现分割线效果。

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