Flutter实现带图片下拉列表：选中项显图无箭头、选项为图片卡片

要实现你需要的效果，核心是自定义下拉按钮的选中项样式、选项样式，同时隐藏默认箭头。下面是完整的实现代码：

首先定义选项数据模型：

class DropdownOption {
  final String name;
  final String imageAsset;

  DropdownOption({required this.name, required this.imageAsset});
}

然后是主页面的StatefulWidget实现：

import 'package:flutter/material.dart';

class ImageDropdownDemo extends StatefulWidget {
  const ImageDropdownDemo({super.key});

  @override
  State<ImageDropdownDemo> createState() => _ImageDropdownDemoState();
}

class _ImageDropdownDemoState extends State<ImageDropdownDemo> {
  // 模拟选项数据
  final List<DropdownOption> _options = [
    DropdownOption(name: "选项1", imageAsset: "assets/image1.png"),
    DropdownOption(name: "选项2", imageAsset: "assets/image2.png"),
    DropdownOption(name: "选项3", imageAsset: "assets/image3.png"),
  ];

  DropdownOption? _selectedOption;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("带图片的下拉列表")),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.grey),
            borderRadius: BorderRadius.circular(8),
          ),
          child: DropdownButton<DropdownOption>(
            // 隐藏默认下拉箭头
            icon: const SizedBox.shrink(),
            // 占满容器宽度
            isExpanded: true,
            // 选中项的自定义显示：只展示图片
            selectedItemBuilder: (BuildContext context) {
              return _options.map((option) {
                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  child: _selectedOption != null
                      ? Image.asset(
                          _selectedOption!.imageAsset,
                          width: 40,
                          height: 40,
                          fit: BoxFit.cover,
                        )
                      : const SizedBox(),
                );
              }).toList();
            },
            value: _selectedOption,
            hint: const Text("选择一个选项"),
            onChanged: (DropdownOption? newValue) {
              setState(() {
                _selectedOption = newValue;
              });
            },
            // 自定义下拉选项为带图片的卡片
            items: _options.map((option) {
              return DropdownMenuItem<DropdownOption>(
                value: option,
                child: Card(
                  elevation: 2,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Image.asset(
                          option.imageAsset,
                          width: 40,
                          height: 40,
                          fit: BoxFit.cover,
                        ),
                        const SizedBox(width: 12),
                        Text(option.name),
                      ],
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

关键说明： #

• 隐藏下拉箭头：通过icon: const SizedBox.shrink()替换默认箭头组件，实现无箭头效果
• 选中项显示图片：利用selectedItemBuilder自定义选中后的展示内容，这里只渲染选中选项的图片
• 选项卡片样式：将DropdownMenuItem的子组件用Card包裹，内部通过Row排列图片和文字，实现卡片式选项
• 样式调整：外层的Container添加边框和圆角，让下拉按钮整体更美观，你可以根据需求修改颜色、圆角值等

注意：记得在pubspec.yaml中配置你的图片资源路径，比如：

flutter:
  assets:
    - assets/image1.png
    - assets/image2.png
    - assets/image3.png

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