Question

我只是想问一下，是否可以在Flutter中使用Tab之前的内容显示Tab Bar View（我的意思是，例如Tabs位于屏幕中间，并且它们之前具有内容-例如个人资料信息- Instagram及其个人资料部分。

我已经尝试了默认的“标签视图”，但这不是我想要的。

return DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.white,
      flexibleSpace: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          TabBar(
            labelColor: Colors.teal,
            labelStyle: TextStyle(
              fontWeight: FontWeight.bold,
            ),

            unselectedLabelColor: Colors.black45,
            unselectedLabelStyle: TextStyle(
              fontWeight: FontWeight.normal
            ),

            tabs: [
              Tab(
                icon: Icon(Icons.list)
              ),
              Tab(
                icon: Icon(Icons.map)
              )
            ],
          ),
        ],
      ),
    ),

    body: TabBarView(
      children: <Widget>[

        Container(
          child: ListView(
            children: <Widget>[
              Container(
                color: Colors.red,
                height: 100,
                child: Text('Hello'),
              ),
            ],
          )
        ),

        Container(
          child: Text('testuju'),
        )

      ],
    ),
  ),
);

是否甚至可以使用“选项卡视图”来做到这一点，还是应该伪造带有样式按钮的选项卡？非常感谢！

Answer 1

您可以这样做

return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: PreferredSize(
            child: AppBar(
              backgroundColor: Colors.greenAccent,
              bottom: TabBar(
                controller: tabController,
                tabs: [
                  Tab(
                    child: Text("Login"),
                  ),
                  Tab(
                    child: Text("Sign Up"),
                  ),
                ],
                indicatorColor: Colors.black,
              ),
              flexibleSpace: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.red,
                      Colors.orange,
                    ],
                  ),
                ),
              ),
            ),
            preferredSize: Size.fromHeight(200.0),
          ),
          body: TabBarView(
            controller: tabController,
            children: [
              LoginApp(),
              SignUpApp(),
            ],
          ),
        ),
      );

Answer 2

您可以尝试：

Scaffold(
      body: DefaultTabController(
        initialIndex: // initial tab,
        length: // tabs numbers,
        child: NestedScrollView(
          headerSliverBuilder: (buildContext, isScrolled){
            return <Widget>[
              SliverAppBar(
                floating: false,
                pinned: true,
                primary: true,
                automaticallyImplyLeading: false,
                actions: <Widget>[
                  BackBtnIcon(action: (){
                    Navigator.pop(context);
                  },
                  ),
                  SizedBox(width: 6,),
                ],
                title: Text(memberFullName),
              ),
              SliverPadding(
                padding: EdgeInsets.all(0),
                sliver: SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Container(
                        color: CopticColors.mainButtonColor,
                        child: CustomTabBar()
                      ),
                    ]
                  )
                ),
              )
            ];
          },
          body: SafeArea(
                      minimum: EdgeInsets.all(20),
                      child: TabBarView(
//                    physics: new NeverScrollableScrollPhysics(),
                        children: [ // replace with your tabs
                          ConfessionTab(model: snapshot.data,),
                          CommunicationDetails(model: snapshot.data,),
                          GeneralDetails(model: snapshot.data,),
                          ChurchDetails(model: snapshot.data,),
                          GovDetails(model: snapshot.data,),
                        ],
                      )
        )
      ),
    );

Flutter中是否可以使Tab Bar包含内容？

2 个答案: