有没有办法在 Flutter 的 TabBar 中创建下拉列表？

Posted 2023-03-23

【中文标题】有没有办法在 Flutter 的 TabBar 中创建下拉列表？

【英文标题】：Is there a way to make a dropdownlist inside a TabBar in Flutter?

【发布时间】：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);
            ,
          ),
              

如果不可能，请您提出替代方案吗？

【参考方案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""),
            ),
          ],
        ),
      ),
    );