Question

我有以下构建方法

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: NestedScrollView(
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                  SliverAppBar(
                    expandedHeight: size.getSizePx(277),
                    floating: false,
                    title: const Text("Details"),
                    pinned: true,
                    flexibleSpace: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Constants.gradientStart,
                              Constants.gradientEnd
                            ]),
                      ),
                      child: FlexibleSpaceBar(
                        centerTitle: true,
                        background: Image.asset(
                            "path/to/image",
                            fit: BoxFit.fill,
                          ),
                      ),
                    ),
                  ),
                ];
              },
              body: DefaultTabController(
                length: 4,
                child: SingleChildScrollView(
                  padding: EdgeInsets.only(
                      left: 7, right: 7),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                        maxHeight: MediaQuery.of(context).size.height),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Container(
                          height: 180,
                          child: someTextWidgets(), //some widgets here
                        ),
                        Expanded(
                          child: Container(
                            margin: EdgeInsets.only(top: 20),
                            child: _tabBarView(), // this will render tab bar and its contents
                          ),
                        ),
                        Container(
                          height: 10,
                          child: otherWidgets(), //other widgets here
                        ),
                      ],
                    ),
                  ),
                ),
              )),
        );
  }

和_tabBarView()小部件

Widget _tabBarView() {
    return Column(
      children: <Widget>[
        Container(
          constraints: BoxConstraints.expand(height: 60),
          child: TabBar(
              labelStyle: TextStyle(fontSize: size.getSizePx(12)),
              labelColor: Constants.primaryColor,
              unselectedLabelColor: Colors.black45,
              indicatorColor: Constants.primaryColor,
              tabs: [
                Tab(
                  text: "Contact Info",
                  icon: Icon(Constants.iconAccount),
                ),
                Tab(
                  text: "Details",
                  icon: Icon(Constants.iconDetails),
                ),
                Tab(
                  text: "Map",
                  icon: Icon(Constants.iconMap),
                ),
              ]),
        ),
        Expanded(
          child: Container(
            child: TabBarView(children: [
              Container(
                margin: EdgeInsets.only(top: size.getSizePx(15)),
                child: Column(
                  children: <Widget>[
                    //some text widgets here
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: size.getSizePx(15)),
                child: Column(
                  children: <Widget>[
                    //SOME TEXT WIDGETS,
                    //EPANSION TILES (ACCORDIONS)
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: size.getSizePx(15)),
                child: Text("Some long text here"),
              ),
            ]),
          ),
        )
      ],
    );
  }

问题

如上面的代码片段所示，SingleChildScrollView是DefaultController的子级，而SingleChildScrollView包含所有其他小部件。

第二个选项卡具有很少的扩展磁贴，可以对其进行扩展和折叠以显示/隐藏内容，扩展时会显示bottom overflow by消息。如果选项卡中的内容大小增加，我需要整个页面都可滚动。

我还挺陌生的，有人可以帮我吗？

谢谢

Answer 1

尝试一下

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 277,
                floating: false,
                title: const Text("Details"),
                pinned: true,
                flexibleSpace: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          Colors.redAccent,
                          Colors.blueAccent
                        ]),
                  ),
                  child: FlexibleSpaceBar(
                    centerTitle: true,
                    background: Image.asset(
                      "path/to/image",
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
            ];
          },
          body: DefaultTabController(
            length: 3,
            child: SingleChildScrollView(
              padding: EdgeInsets.only(
                  left: 7, right: 7),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                    maxHeight: MediaQuery.of(context).size.height),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      height: 180,
                      child: Text("textttdd"), //some widgets here
                    ),
                    TabBar(
                        labelStyle: TextStyle(fontSize: 12),
                        labelColor: Colors.blue,
                        unselectedLabelColor: Colors.black45,
                        indicatorColor: Colors.blue,
                        tabs: [
                          Tab(
                            text: "Contact Info",
                            icon: Icon(Icons.info),
                          ),
                          Tab(
                            text: "Details",
                            icon: Icon(Icons.details),
                          ),
                          Tab(
                            text: "Map",
                            icon: Icon(Icons.map),
                          ),
                        ]),
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.only(top: 20),
                        child: TabBarView(children: [
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Column(
                              children: <Widget>[
                                //some text widgets here
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: ListView(
                              children: <Widget>[
                                Text("hello"),
                                Column(children: ["demo","demo1","demo","demo1","demo","demo1","demo","demo1","2222","123333"].map((f)=> ExpansionTile(title: Text(f),)).toList(),)
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text("Some long text here"),
                          ),
                        ]), // this will render tab bar and its contents
                      ),
                    ),
                    Container(
                      height: 10,
                      color: Colors.redAccent, //other widgets here
                    ),
                  ],
                ),
              ),
            ),
          )),
    );
  }

标签页增加时如何使页面可滚动

1 个答案: