flutter 添加图标到抖动中的DropDownButton(展开)左侧

zujrkrfu  于 2023-03-24  发布在  Flutter
关注(0)|答案(8)|浏览(195)

我想在DropDownButton的左边添加图标,但是找不到方法,我想实现的是这样的:

我试过下面的代码,但它的地方图标的权利,我不希望它,它也覆盖箭头图标:

`@override
  Widget build(BuildContext context) {
  return Scaffold(
  body: Container(
    margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
    color: Colors.white,
    child: DropdownButton(
      icon: Icon(
        Icons.person,
        color: Colors.redAccent,
        size: 20.09,
      ),
      isExpanded: true,
      items: _studentList.map((val) {
        return DropdownMenuItem(
          value: val,
          child: Text(val),
        );
      }).toList(),
      value: _currentSelectedItem,
      onChanged: (value) {
        setState(() {
          _currentSelectedItem = value;
        });
      },
    ),
  ),
);
  }`

上面代码的输出是这样的:

我还尝试将Icon()DropDownButton()放在Row()小部件中,但这不允许DropDownButton()扩展到全宽。
任何帮助都将不胜感激。
谢谢

ltskdhd1

ltskdhd11#

使用DropdownButtonFormField,因为它具有decoration属性,您可以使用prefixIcon属性设置左侧图标。

示例:

DropdownButtonFormField<String>(
         decoration: InputDecoration(
         prefixIcon: Icon(Icons.person),
         ),
         hint: Text('Please choose account type'),
         items: <String>['A', 'B', 'C', 'D'].map((String value) {
         return DropdownMenuItem<String>(
         value: value,
         child: new Text(value),
       );
      }).toList(),
     onChanged: (_) {},
),

结果:

7gs2gvoe

7gs2gvoe2#

没有特定的属性来按照你想要的方式添加图标,但是你可以在你的代码中找到一些调整。使用下面的代码,它会把你的Icon()放在你的DropDownButton()按钮的顶部。

@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
  children: <Widget>[
    Container(
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 20.0,
            spreadRadius: 0.5,
            offset: Offset(1.0, 1.0),
          ),
        ],
      ),
      padding: EdgeInsets.only(left: 44.0),
      margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
      child: DropdownButton(
        isExpanded: true,
        items: your_list.map(
          (val) {
            return DropdownMenuItem(
              value: val,
              child: Text(val),
            );
          },
        ).toList(),
        value: _currentSelectedItem,
        onChanged: (value) {
          setState(() {
            _currentSelectedItem = value;
          });
        },
      ),
    ),
    Container(
      margin: EdgeInsets.only(top: 80.0, left: 28.0),
      child: Icon(
        Icons.person,
        color: Colors.redAccent,
        size: 20.0,
      ),
    ),
  ],
),
  );
}
6l7fqoea

6l7fqoea3#

记住,一切都是小部件,所以:

iconSize: 0,
hint: Row(
         children: [
            Container(
                child: Text('Freguesias'),
            ),
            Container(
                child: Icon(Icons.arrow_drop_down),
            ),
          ],
 ),
yduiuuwa

yduiuuwa4#

这可能太晚了。但对即将到来的观众会有帮助。
不使用DropDownButton,我们可以使用DropDownButtonFormField。它有一个decoration属性。这样我们就可以利用prefixIcon属性在DropDownButton的左侧添加图标:

DropDownButtonFormField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.person, color: Colors.redAccent),
  ),
  ...
);
zazmityj

zazmityj5#

如果图标真的应该是DropDown组件的视觉部分,你可以走下面的路线。它有点黑客,缺乏响应,但它是更多实验的开始。我添加了一个完整的工作示例,所以你可以复制粘贴到一个可运行的主dart文件。
简而言之,它使用了堆栈布局,所以图标只是放在下拉组件上。然后我填充了文本,以便左侧有空间。

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: <Widget>[
            DropdownButton<String>(
              value: dropdownValue,
              //icon: Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
              items: <String>['One', 'Two', 'Free', 'Four']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 30.0),
                    child: Text("$value"),
                  ),
                );
              }).toList(),
            ),
            Container(
                margin: EdgeInsets.symmetric(vertical: 10),
                child: Icon(Icons.arrow_downward)),
          ],
        ),
      ),
    );
  }
}
guykilcj

guykilcj6#

尝试使用DropdownButtonFormField的装饰属性和使用prefixIcon属性。

DropdownButtonFormField(
      isDense: false,
      itemHeight: 48,
      isExpanded: true,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.question_answer_rounded),//Add this line
        filled: true,
        ...
        ),
        ...
  )

这将在左侧添加一个图标。

f8rj6qna

f8rj6qna7#

将你的图标和下拉窗口小部件 Package 在一个行小部件中,嵌套在一个容器中将完成如下工作:

body: Container(
    margin: EdgeInsets.only(top: 64.0, left: 16.0, right: 16.0),
    color: Colors.white,
    child: 
    child: Row(
    children: <Widget>[
      Icon(
        Icons.person,
        color: Colors.redAccent,
        size: 20.09,
     ),
     Expanded(
        flex:1,
        child:DropdownButton(
            isExpanded: true,
            items: _studentList.map((val) {
            return DropdownMenuItem(
              value: val,
              child: Text(val),
            );
        }).toList(),
        value: _currentSelectedItem,
        onChanged: (value) {
         setState(() {
           _currentSelectedItem = value;
         });
      },
     ),
    )
  ]  
)
ru9i0ody

ru9i0ody8#

简单的方法是将child prop传递给DropdownMenuItem,然后可以传递任何小部件,我已经创建了一行并在行中传递了图标和文本:

items: <String>['George Green School', 'George Blue School', 'George Red School', 'George Yellow School']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Row(
                  children: [
                    Icon(Icons.dangerous),
                    Text(value, style: TextStyle(fontSize : 12),),
                  ],
                ),
              );
            }).toList(),

相关问题