Flutter下拉菜单选中值后位置偏移问题求助

问题根源在于下拉菜单的容器未固定高度，且DropdownButton默认对齐方式导致选中选项后布局高度变化，进而偏离搜索框所在行。以下是具体修复方案：

修复步骤 #

• 给下拉菜单的外层Container添加固定高度height: 48，与搜索框高度保持一致
• 为DropdownButton设置alignment: Alignment.centerLeft，确保选中文本与hint的对齐方式统一
• 调整DropdownMenuItem的内部布局，保证所有选项的高度和对齐一致

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:hauskafein/theme.dart';

class SearchSortCafePage extends StatefulWidget {
  SearchSortCafePage({super.key});

  @override
  State<SearchSortCafePage> createState() => _SearchSortCafePageState();
}

class _SearchSortCafePageState extends State<SearchSortCafePage> {
  String? selected;
  List<String> SortData = [
    'Reccomended',
    'Popularity',
    'Distance',
    'Rating',
  ];
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 16),
      child: Row(
        children: [
          // SEARCH
          Container(
            margin: EdgeInsets.symmetric(horizontal: 16),
            width: MediaQuery.of(context).size.width / 1.7,
            height: 48,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: blackColor.withOpacity(0.15),
                  blurRadius: 4,
                  offset: const Offset(0, 5),
                ),
              ],
              color: whiteColor,
              borderRadius: const BorderRadius.all(
                Radius.circular(28),
              ),
            ),
            child: Row(
              children: [
                Container(
                  margin: const EdgeInsets.only(left: 16),
                  width: 24,
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: const AssetImage('assets/images/icon_search.png'),
                        fit: BoxFit.contain),
                  ),
                ),
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 16),
                    child: TextFormField(
                      style: regularText.copyWith(
                        fontSize: 16,
                        color: blackColor.withOpacity(0.8),
                      ),
                      decoration: const InputDecoration(
                        hintText: 'Search Cafe',
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          // SORT
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(right: 8),
              // 新增固定高度，与搜索框一致
              height: 48,
              decoration: BoxDecoration(
                color: orangeColor,
                borderRadius: BorderRadius.circular(28),
              ),
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8),
                child: DropdownButton(
                  dropdownColor: orangeColor,
                  isExpanded: true,
                  // 新增对齐方式，确保文本左对齐且居中
                  alignment: Alignment.centerLeft,
                  icon: const Image(
                    image: AssetImage('assets/images/icon_dropdown.png'),
                    width: 16,
                    height: 16,
                    fit: BoxFit.contain,
                  ),
                  underline: const SizedBox(),
                  borderRadius: BorderRadius.circular(16),
                  hint: Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Sort By',
                      style: regularText.copyWith(
                        color: whiteColor,
                        fontSize: 12,
                        fontWeight: medium,
                      ),
                    ),
                  ),
                  value: selected,
                  items: SortData.map(
                    (e) => DropdownMenuItem(
                      value: e,
                      // 确保选项文本对齐一致
                      alignment: Alignment.centerLeft,
                      child: Text(
                        e,
                        style: regularText.copyWith(
                          color: whiteColor,
                          fontSize: 12,
                          fontWeight: medium,
                        ),
                      ),
                    ),
                  ).toList(),
                  onChanged: ((value) {
                    setState(
                      () {
                        selected = value;
                      },
                    );
                  }),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改点说明 #

1. 固定下拉容器高度：为下拉菜单的外层Container添加height:48，确保其高度始终与搜索框一致，避免内容变化导致容器高度改变
2. 统一对齐方式：给DropdownButton和DropdownMenuItem设置alignment: Alignment.centerLeft，保证hint和选中选项的文本对齐方式一致，消除布局偏移
3. 简化选项布局：移除DropdownMenuItem内部多余的Row和Container，减少嵌套层级，避免不必要的布局干扰

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