为什么我无法在Flutter中的下拉按钮中显示行列表? [英] Why can't I display a list in rows in dropdown button in Flutter?

问题描述

我想在下拉菜单中将图标和文本显示为每个项目.根据此答案，我尝试了 https://stackoverflow.com/a/65831827/7870443 .但是我的代码无法正常工作.我看到一个下划线和下拉按钮.但不可点击.

I want to show an icon and text as each item in a dropdown menu. According to this answer https://stackoverflow.com/a/65831827/7870443 I tried. But my code is not working. I see an underline and dropdown button. But not clickable.

这就是我得到的.我看到了下划线和下拉按钮.但不可点击.

下面是我从链接

    import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String dropdownValue = 'Hillary';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: DropdownButton<String>(
          items: <String>['Hillary', 'Joe', 'Felix', 'Monica'].map((name) {
            return DropdownMenuItem<String>(
              value: name,
              // Your row here:
              child: Row(
                children: [
                  Icon(Icons.person),
                  Text(name),
                ],
              ),
            );
          }).toList(),
          onChanged: (selectedName) {
            setState(() {
              dropdownValue = selectedName;
            });
          },
        ),
      )
    );
  }
}

推荐答案

只需为 DropdownButton 设置值，如下代码:

just set value for DropdownButton like code below:

String dropdownValue = 'Hillary';
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return Scaffold(
        appBar: AppBar(
          title: Text('widget.title'),
        ),
        body: Center(
          child: DropdownButton<String>(
            value: dropdownValue,
            items: <String>['Hillary', 'Joe', 'Felix', 'Monica'].map((name) {
              return DropdownMenuItem<String>(
                value: name,
                // Your row here:
                child: Row(
                  children: [
                    Icon(Icons.person),
                    Text(name),
                  ],
                ),
              );
            }).toList(),
            onChanged: (selectedName) {
              setState(() {
                dropdownValue = selectedName;
              });
            },
          ),
        ));
  }

更改"图标的一种方法是使用 Map 如下代码:

for Change icon one way is using Map like code below:

String dropdownValue = 'Hillary';
  Map<String, IconData> map = {
    'Hillary': Icons.language,
    'Joe': Icons.person,
    'Felix': Icons.print,
    'Monica': Icons.title
  };
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return Scaffold(
        appBar: AppBar(
          title: Text('widget.title'),
        ),
        body: Center(
          child: DropdownButton<String>(
            value: dropdownValue,
            items: <String>['Hillary', 'Joe', 'Felix', 'Monica'].map((name) {
              return DropdownMenuItem<String>(
                value: name,
                // Your row here:
                child: Row(
                  children: [
                    Icon(map[name]),
                    Text(name),
                  ],
                ),
              );
            }).toList(),
            onChanged: (selectedName) {
              setState(() {
                dropdownValue = selectedName;
              });
            },
          ),
        ));
  }

这篇关于为什么我无法在Flutter中的下拉按钮中显示行列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！