如何在Flutter中为DropdownButton的每个项目显示图标和文本? [英] How to display an Icon and Text for each item of DropdownButton in Flutter?

问题描述

我想在Flutter中为DropdownButton的每个DropdownMenuItem显示一行.我想在行中显示一个图标和一个文本.

I want to display a Row for each DropdownMenuItem of DropdownButton in Flutter. I want to display an icon and a text in the Row.

如果有人可以帮助我.

这就是我尝试过的方式.我尝试为DropdownButton中的每个项目连续添加图标和文本.

This is how I've tried. I've tried to add the Icon and Text in a Row for each item in the DropdownButton.

    class _LoginPageState extends State<LoginPage> {
  Widget dropdownValue = Row(
    children: [Icon(Icons.star), Text("One")],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Container(
        child: ListView(
          padding: EdgeInsets.all(20.0),
          children: [
            Padding(padding: EdgeInsets.all(displayHeight(context) * 0.02)),
            Center(
              child: Image(
                image: AssetImage('assets/images/sendmelogo.png'),
                height: displayHeight(context) * 0.07,
              ),
            ),
            Padding(padding: EdgeInsets.all(displayHeight(context) * 0.02)),
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: Colors.grey[200],
              ),
              // padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
              padding: EdgeInsets.all(10.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Sending to:", textAlign: TextAlign.start),
                  DropdownButton<Widget>(
                    value: dropdownValue,
                    icon: Icon(Icons.arrow_downward),
                    iconSize: 24,
                    elevation: 16,
                    style: TextStyle(color: Colors.deepPurple),
                    underline: Container(
                      height: 2,
                      color: Colors.deepPurpleAccent,
                    ),
                    onChanged: (Widget newValue) {
                      setState(() {
                        dropdownValue = newValue;
                      });
                    },
                    items: <Widget>[
                      Row(
                        children: [Icon(Icons.star), Text("One")],
                      ),
                      Row(
                        children: [Icon(Icons.plus_one), Text("Two")],
                      )
                    ].map<DropdownMenuItem<Widget>>((Widget value) {
                      return DropdownMenuItem<Widget>(
                        value: value,
                        child: Container(
                          child: value,
                        ),
                      );
                    }).toList(),
                  ),
                ],
              ),
            ),

推荐答案

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) {
    // do some action here
  },
),

这篇关于如何在Flutter中为DropdownButton的每个项目显示图标和文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！