Flutter中如何将ElevatedButton放在CustomDropdown下拉框右侧

这是使用animated_custom_dropdown实现的两个搜索及下拉选择区域，需要将Get Quotes filter ElevatedButton放置在Set Location下拉框的右侧，与下拉框同一行横向排布，现有实现代码如下：

import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../constants/colors.dart';



const _labelStyle = TextStyle(fontWeight: FontWeight.w600);

class FantomSearch extends StatefulWidget {
  const FantomSearch({Key? key}) : super(key: key);

  @override
  State<FantomSearch> createState() => _FantomSearchState();
}

class _FantomSearchState extends State<FantomSearch> {
  final formKey = GlobalKey<FormState>();
  final List<String> list = ['Heating', 'Electricians', 'Repair or Service', 'Accessibility Planner'];

  final jobRoleFormDropdownCtrl = TextEditingController(),
      jobRoleSearchDropdownCtrl = TextEditingController();

  @override
  void dispose() {
    jobRoleFormDropdownCtrl.dispose();
    jobRoleSearchDropdownCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      //backgroundColor:AppGreen,
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark.copyWith(
          statusBarColor: AppGreen,
        ),
        backgroundColor: AppGreen,
        elevation: .10,
      ),
      body: Container(
        height: 200,
        color: AppGreen,
        child: ListView(
          padding: const EdgeInsets.all(16.0),
          children: [
            CustomDropdown.search(
              hintText: 'Search Services',
              items: list,
              controller: jobRoleSearchDropdownCtrl,
              fillColor: DarkGreen,

            ),
            const SizedBox(height: 24),
            // using form for validation
            Form(
              key: formKey,
              child: Padding(
                padding: const EdgeInsets.only(right: 150),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CustomDropdown(
                      hintText: 'Set Location',
                      items: list,
                      controller: jobRoleFormDropdownCtrl,
                      excludeSelected: false,
                      fillColor: DarkGreen,
                    ),
                    const SizedBox(height: 16),
                    SizedBox(
                      child: ElevatedButton(
                        onPressed: () {
                          if (!formKey.currentState!.validate()) {
                            return;
                          }
                        },
                        child: const Text(
                          'Get Quotes filter',
                          style: TextStyle(fontWeight: FontWeight.w600),
                        ),
                        style: ElevatedButton.styleFrom(primary: ContainerGreen),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

问题根源是下拉框和按钮被放在了纵向布局的Column组件中，二者默认上下排列。按以下步骤修改即可实现横向并排效果：

• 移除包裹下拉框和按钮的Column，替换为横向布局的Row
• 给Set Location对应的CustomDropdown外层包裹Expanded组件，约束其宽度为Row内的剩余可用宽度，避免下拉框默认撑满父组件宽度导致的布局溢出
• 删除Padding组件上硬编码的right: 150边距，将原来控制纵向间距的SizedBox(height: 16)改为SizedBox(width: 16)，放在下拉框和按钮之间控制水平间距
• 给Row设置crossAxisAlignment: CrossAxisAlignment.start，保证按钮和下拉框顶部对齐，和原有视觉逻辑一致

修改后的Form部分核心代码：

Form(
  key: formKey,
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(
        child: CustomDropdown(
          hintText: 'Set Location',
          items: list,
          controller: jobRoleFormDropdownCtrl,
          excludeSelected: false,
          fillColor: DarkGreen,
        ),
      ),
      const SizedBox(width: 16),
      ElevatedButton(
        onPressed: () {
          if (!formKey.currentState!.validate()) {
            return;
          }
        },
        child: const Text(
          'Get Quotes filter',
          style: TextStyle(fontWeight: FontWeight.w600),
        ),
        style: ElevatedButton.styleFrom(primary: ContainerGreen),
      ),
    ],
  ),
)

替换原有Form的child内容即可，其余代码不需要改动，布局会自动适配不同屏幕宽度。

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