appBar下方的pin标签栏

Posted 2023-02-23

【中文标题】appBar下方的pin标签栏

【英文标题】：pin tab bar below appBar

【发布时间】：2022-01-18 01:06:22

【问题描述】：

滚动时，如何使 4 个选项卡固定（应该显示在 appBar 下方）？

Scaffold(appBar..,
     body:DefaultTabController(
        length: 4,
          child: CustomScrollView(slivers: <Widget>[
            SliverPersistentHeader(
               pinned: false,
               delegate: DynamicSliverHeaderDelegate(
                child: Column(
                   mainAxisAlignment: MainAxisAlignment.start,
                   crossAxisAlignment:
                   CrossAxisAlignment.start,
                   children: <Widget>[Text("View More")],
                   ),
           ),
      ),
            SliverToBoxAdapter(
              child: _showTab(snapshot.data)),
                            ]),
     );

_showTab 函数

 Widget _showTab(RFWIReviewTableData rfwi) 
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
            height: 50,
            child: AppBar(
              elevation: 0,
              backgroundColor: Colors.grey.shade200,
              bottom: TabBar(
                  unselectedLabelColor: Colors.grey,
                  labelColor: Colors.orange,
                  indicatorSize: TabBarIndicatorSize.tab,
                  tabs: [
                    Tab(
                      text: "Response",
                    ),
                    Tab(text: "Image"),
                    Tab(
                      text: "Checklist",
                    ),
                    Tab(
                      text: "Signature",
                    ),
                  ]),
            )),
        ConstrainedBox(
          constraints:
              BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
          child: TabBarView(
            children: [
              _showResponse(rfwi),
              Text('Person'),
              Text('people'),
              Text('people')
            ],
          ),
        )
      ],
    );
  

DynamicSliverHeaderDelegate

class DynamicSliverHeaderDelegate extends SliverPersistentHeaderDelegate 
  final Widget child;
  final double maxHeight;
  final double minHeight;

  const DynamicSliverHeaderDelegate(
   this.child,
    this.maxHeight = 250,
    this.minHeight = 80,
  );

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) 
    return child;
  

  // @override
  // bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) => true;

  @override
  bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) 
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  

  @override
  double get maxExtent => maxHeight;

  @override
  double get minExtent => minHeight;

【参考方案1】：

按照下面的代码，不要忘记将您的 Appbar 与 topCenter 对齐

_showTab(BuildContext context, TabController controller) 
  return SingleChildScrollView(
    child: Column(
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: SizedBox(
              height: 50,
              child: AppBar(
                elevation: 0,
                backgroundColor: Colors.grey.shade200,
                bottom: TabBar(
                  controller: controller,
                    unselectedLabelColor: Colors.grey,
                    labelColor: Colors.orange,
                    indicatorSize: TabBarIndicatorSize.tab,
                    tabs: [
                      Tab(
                        text: "Response",
                      ),
                      Tab(text: "Image"),
                      Tab(
                        text: "Checklist",
                      ),
                      Tab(
                        text: "Signature",
                      ),
                    ]),
              )),
        ),
        ConstrainedBox(
          constraints:
          BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
          child: TabBarView(
            controller: controller,
            children: [
              SingleChildScrollView(
                child: Container(
                  child: Column(
                    children: [
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                      Text('Person'),
                    ],
                  ),
                ),
              ),
              Text('Person'),
              Text('people'),
              Text('people')
            ],
          ),
        )
      ],
    ),
  );

【讨论】：

标签栏可以固定吗？

是的，这个 Tapbar 固定在身体的顶部

“查看更多”文本怎么样？它应该显示在 appBar 的顶部

【参考方案2】：

你可以使用 sticky_headers,

易于实施。