【问题标题】:Is there a way to make a dropdownlist inside a TabBar in Flutter?有没有办法在 Flutter 的 TabBar 中创建下拉列表?
【发布时间】:2022-01-02 21:32:34
【问题描述】:

我正在尝试在 TabBar 项目中添加 DropDownList,以便用户可以在 tabbarwiew 更改小部件之前选择下拉项目。我试图做到这一点,但它在显示 DropDownList 项目之前更改了 TabBarView 小部件:

tabs: [
          const Tab(
            text: 'Home',
          ),
          const Tab(
            text: 'About us',
          ),
          DropdownButton(
            value: selectedValue,
            items: menuItems, onChanged: (String? value) {
              print(value);
            },
          ),
              

如果不可能,请您提出替代方案吗?

【问题讨论】:

    标签: flutter drop-down-menu flutter-web tabbar


    【解决方案1】:

    是的,DropdownButton 可以作为Tab

    tabs: 获取小部件列表,DropdownButton 是一个小部件,您可以简单地使用它。

     String? selectedValue;
    
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          initialIndex: 1,
          length: 4,
          child: Scaffold(
            appBar: AppBar(
              title: const Text('TabBar Widget'),
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    icon: Icon(Icons.cloud_outlined),
                  ),
                  Tab(
                    icon: Icon(Icons.beach_access_sharp),
                  ),
                  Tab(
                    icon: Icon(Icons.brightness_5_sharp),
                  ),
                  DropdownButton<String?>(
                    value: selectedValue,
                    onChanged: (value) {
                      setState(() {
                        selectedValue = value;
                      });
                      print("value");
                    },
                    items: ["A", "B", "C"]
                        .map(
                          (e) => DropdownMenuItem(
                            child: Text(e),
                            value: e,
                          ),
                        )
                        .toList(),
                  ),
                ],
              ),
            ),
            body: TabBarView(
              children: <Widget>[
                Center(
                  child: Text("It's cloudy here"),
                ),
                Center(
                  child: Text("It's rainy here"),
                ),
                Center(
                  child: Text("It's sunny here"),
                ),
                Center(
                  child: Text("TabBar here ${selectedValue ?? "select 1st"}"),
                ),
              ],
            ),
          ),
        );
      }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-01-01
      • 2019-04-24
      • 1970-01-01
      • 2017-07-16
      • 2018-11-09
      相关资源
      最近更新 更多