有没有办法在 Flutter 的 TabBar 中制作下拉列表？

Question

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

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

如果不可能，请问您能推荐一个替代方案吗？

Answer 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"}"),
            ),
          ],
        ),
      ),
    );
  }

有没有办法在 Flutter 的 TabBar 中制作下拉列表？

Is there a way to make a dropdownlist inside a TabBar in Flutter?

tabbar

drop-down-menu

flutter

flutter-web