如何将居中的 TabBarView 移到页面顶部? [英] How To Move The TabBarView in the Center to The Top of the Page?

问题描述

我在页面中间有一个 TabBarView 可以更改选项卡.选项卡 1 上的内容由 StaggeredGridView.countBuilder 创建，而第二个选项卡上的内容由 listview.builder 创建.

I have a TabBarView in the middle of the page which changes tab. The content on tab 1 is created by StaggeredGridView.countBuilder while content on 2nd tab is created by listview.builder.

每个tab的内容是可滚动的，但是只有TabBarView下面的内容是可滚动的.

The content of each tab is scrollable, however, only the content below the TabBarView is scrollable.

是否有可能当我滚动页面时，TabBarView 也会从屏幕中间移动到页面顶部并将自身锁定在那里，以便每个标签的内容都可以填满整个屏幕?

Is it possible that as I scroll the page, the TabBarView also moves from the middle of the screen to the top of the page and locks itself there, so that the entire screen can be filled with content from each tab?

我看到有人建议将 SingleChildScrollView 用于主体和物理:NeverScrollableScrollPhysics() 用于 listview.builder.

I've seen people suggesting using SingleChildScrollView for the body and physics: NeverScrollableScrollPhysics() for the listview.builder.

这没有用.屏幕在运行时只返回背景颜色.

This has not worked. The screen returns just the background color when it is run.

推荐答案

你需要使用一个自定义的 scrollView 来保存所有的项目.

You need to use a custom scrollView which holds all the items.

1. 您的个人资料详细信息小部件
2. tabBar
3. 标签视图

让我们实现这个

缺点:无法固定应用栏

import 'package:flutter/material.dart';

class MyCustomScrollViewScreen extends StatefulWidget {
  @override
  _MyCustomScrollViewScreenState createState() =>
      _MyCustomScrollViewScreenState();
}

class _MyCustomScrollViewScreenState extends State<MyCustomScrollViewScreen>
    with TickerProviderStateMixin {
  TabController tabController;
  @override
  Widget build(BuildContext context) {
    tabController = TabController(length: 2, vsync: this);
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              floating: true,
              title: Text("AppBar"),
            ),
            //profile widget

            SliverToBoxAdapter(
              key: UniqueKey(),
              child: Container(
                color: Colors.green,
                height: 100,
                child: Center(child: Text("Profile details")),
              ),
            ),

            //tabbar
            SliverPersistentHeader(
                pinned: true,
                floating: true,
                delegate: MyCustomHeader(
                    expandedHeight: kToolbarHeight,
                    tabs: TabBar(
                      controller: tabController,
                      tabs: [
                        Icon(
                          Icons.ac_unit,
                          size: 30,
                          color: Colors.black,
                        ),
                        Icon(
                          Icons.access_alarm,
                          size: 30,
                          color: Colors.black,
                        ),
                      ],
                    ))),
            //children
            SliverFillRemaining(
              child: TabBarView(
                controller: tabController,
                children: [
                  Center(child: Text("I'm 1")),
                  Center(child: Text("I'm 2"))
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

/// persistent header
class MyCustomHeader extends SliverPersistentHeaderDelegate {
  MyCustomHeader({
    @required this.expandedHeight,
    this.tabs,
    this.context,
  });

  final Widget tabs;
  final double expandedHeight;
  final BuildContext context;

  @override
  double get maxExtent => expandedHeight;

  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      child: tabs,
    );
  }
}

这是结果

img 网址

这篇关于如何将居中的 TabBarView 移到页面顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！