簡體   English   中英

Flutter:如何根據選擇的內容調整下拉按鈕的大小

[英]Flutter: How to make dropdownbutton resize according to what was selected

我正在嘗試根據下拉菜單中選擇的項目或“提示”文本的寬度來調整下拉按鈕的寬度。 我怎么能這樣做我完全迷路了。 下拉按鈕被放置在可水平滾動的 ListView 內。

class FilterDropdown extends StatelessWidget {
  final Text? hint;
  final String? value;
  final List<DropdownMenuItem<String>>? items;
  final Function(String?)? onChanged;
  final Key? key;
  final IconData? iconData;

  FilterDropdown(
      {this.key,
      this.hint,
      this.value,
      this.items,
      this.onChanged,
      this.iconData});

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(8.0),
          color: const Color(0xff161F25),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(21, 0, 21, 0),
          child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
            selectedItemBuilder: (BuildContext context) {
              return items!.map<Widget>((DropdownMenuItem<String> item) {
                Text innerWidget = item.child as Text;
                return Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      innerWidget.data!,
                      style: TextStyle(color: Colors.white),
                    )
                    // style: const TextStyle(color: Colors.white)),
                    );
              }).toList();
            },
            style: const TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
            key: key,
            hint: Align(
              alignment: Alignment.centerLeft,
              child: hint,
            ),
            value: value,
            icon: const Icon(Icons.arrow_drop_down),
            items: items,
            onChanged: onChanged,
          )),
        ));
  }
}
Expanded(
    child: new Column(
    children: <Widget>[
        new DropdownButton(
            items: [
                new DropdownMenuItem(child: new Text("Abc")),
                new DropdownMenuItem(child: new Text("Xyz")),
            ],
            hint: new Text("Select City"),
            onChanged: null
          )
       ]
    ),
    flex: 1,
)

使用列

你可以這樣做:

Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.only(left: 8, right: 3, top: 0, bottom: 0),
          child: DropdownButtonHideUnderline(
            child: DropdownButton(
              icon: widget.icon,
              isExpanded: true,
              onChanged: (value) {},
              value: 0,
              items:
                    new DropdownMenuItem(child: new Text("1")),
                    new DropdownMenuItem(child: new Text("2")),
            ),
          ),
        )

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM