在 Flutter 中使用 TabBar 和 SliverChildListDelegate答案

【问题标题】：Using TabBar with SliverChildListDelegate in Flutter在 Flutter 中使用 TabBar 和 SliverChildListDelegate
【发布时间】：2021-10-25 11:45:19
【问题描述】：

我需要在我用 Flutter 开发的应用程序的屏幕上添加一个 TabBar，但我要添加的位置是 SliverAppBar 的底部。我该怎么做？

altKisim() 包含一个列。

Column(
children:[
Widget..
Divider(),
--This is where I want to add--
Widget..
],
);

有没有办法添加到这个代码 sn-p 或者我必须完全改变构建？因为我找到的所有解决方案都表明我需要更改它。

【问题讨论】：

我使用TabBarView 进行了测试，但问题是它需要提供高度，在这种情况下，我们将失去对 appBar 的一些控制。我认为NestedScrollView 可能适合这里。另外，如果你在flexibleSpace 中添加 2 3 文本，我们可以在那里使用底部属性。
@YeasinSheikh 你能分享一个简短的示例代码吗？

标签： flutter tabbar sliverappbar

【解决方案1】：

对话示例


class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  get tabView => [
        ...List.generate(
          3,
          (index) => Container(
            height: 700,
            color: index.isEven ? Colors.deepPurple : Colors.deepOrange,
            child: Text("index $index"),
          ),
        ).toList(),
      ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => CustomScrollView(
          slivers: [
            SliverAppBar(
              title: Text("AppBar"),
              expandedHeight: 300,
              floating: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  color: Colors.cyanAccent,
                  child: Column(
                    children: [Text("asdasd")],
                  ),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: tabView[_currentIndex],
            )
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
            label: "AC",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.umbrella),
            label: "umbrella",
          ),
        ],
      ),
    );
  }
}

你的情况能解决吗？

【讨论】：

标签栏按钮应该在底部，而不是在灵活空格键内。如我分享的图片所示。
在这种情况下将是bottomNavigationBar，我更新了答案