tabbarview中的小部件需要额外的底部间距。如何根据内容调整其高度?

问题描述 投票:0回答:1

我的标签栏和卡片小部件中有两个标签,它们组成了两个标签栏视图。在这种情况下,我正在使用Slivers.CustomScrollView是我的父窗口小部件。我在这些视图中显示文本,但它们要从底部移开多余的空白空间,如果这些小部件放置在tabbarview之外,则它们可以正常工作并根据其内容调整高度。 tabbarview,如您所见,它工作正常。

enter image description here

这是我的代码:

import 'package:flutter/material.dart';

class TabviewIssue extends StatefulWidget {
  @override
  _TabviewIssueState createState() => _TabviewIssueState();
}

class _TabviewIssueState extends State<TabviewIssue>with TickerProviderStateMixin {

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    this._tabController = TabController(length: 2, vsync: this);

  }

  String htmlText = 'So vitamins and nutrients are optimally preserved, flavors unfold particularly well. In order to keep the cat food fresh, a special flavor protection foil in the packaging ensures that the oxygen content in the pack is reduced, oxidation is inhibited and the flavors in the cat food are preserved. True love Landlust cat food has exactly the energy content that your cat needs. It provides optimal nutrients and is very digestible. Cat food from True Love is healthy food that tastes cats.';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(child: SizedBox(height: 50,)),
            SliverToBoxAdapter(
              child: Container(
                  color: Colors.grey.shade100,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: TabBar(
                      indicator: BoxDecoration(color: Colors.grey.shade400),
                      labelColor: Colors.white,
                      unselectedLabelColor: Colors.black,
                      indicatorColor: Colors.grey,
                      tabs: <Widget>[
                        Tab(
                            child: Text("Product Features",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                        Tab(
                            child: Text("Reviews",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                      ],
                      controller: this._tabController,
                    ),
                  )),
            ),
            SliverFillRemaining(
              child: TabBarView(
                  controller: _tabController,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                          color: Colors.grey.shade200,
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(children: <Widget>[
                              Text("Features",
                                  style: TextStyle(
                                      fontSize: 17, fontWeight: FontWeight.bold)),
                              Text( htmlText),
                            ]),
                          )),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Card(
                          color: Colors.grey.shade200,
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(children: <Widget>[
                              Text("Features",
                                  style: TextStyle(
                                      fontSize: 17, fontWeight: FontWeight.bold)),
                              Text( htmlText),
                            ]),
                          )),
                    ),

                  ]),
            ),

            SliverToBoxAdapter(
              child:   Padding(
                padding: const EdgeInsets.all(8.0),
                child: Card(
                    color: Colors.grey.shade200,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(children: <Widget>[
                        Text("Features",
                            style: TextStyle(
                                fontSize: 17, fontWeight: FontWeight.bold)),
                        Text( htmlText),
                      ]),
                    )),
              ),
            )
          ],
        ),
      ),
    );
  }
}
flutter flutter-layout flutter-sliver customscrollview
1个回答
0
投票
class TabviewIssue extends StatefulWidget {
  @override
  _TabviewIssueState createState() => _TabviewIssueState();
}

class _TabviewIssueState extends State<TabviewIssue>
    with TickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    this._tabController = TabController(length: 2, vsync: this);
  }

  String htmlText =
      'So vitamins and nutrients are optimally preserved, flavors unfold particularly well. In order to keep the cat food fresh, a special flavor protection foil in the packaging ensures that the oxygen content in the pack is reduced, oxidation is inhibited and the flavors in the cat food are preserved. True love Landlust cat food has exactly the energy content that your cat needs. It provides optimal nutrients and is very digestible. Cat food from True Love is healthy food that tastes cats.';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverToBoxAdapter(
                child: SizedBox(
              height: 50,
            )),
            SliverToBoxAdapter(
              child: Container(
                  color: Colors.grey.shade100,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: TabBar(
                      indicator: BoxDecoration(color: Colors.grey.shade400),
                      labelColor: Colors.white,
                      unselectedLabelColor: Colors.black,
                      indicatorColor: Colors.grey,
                      tabs: <Widget>[
                        Tab(
                            child: Text("Product Features",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                        Tab(
                            child: Text("Reviews",
                                style: TextStyle(
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500))),
                      ],
                      controller: this._tabController,
                    ),
                  )),
            ),
            SliverFillRemaining(
              child: TabBarView(controller: _tabController, children: <Widget>[
                //TAB 1
                Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    ListView(
                      shrinkWrap: true,
                      children: <Widget>[
                        Card(
                            color: Colors.grey.shade200,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Column(children: <Widget>[
                                Text("Features",
                                    style: TextStyle(
                                        fontSize: 17,
                                        fontWeight: FontWeight.bold)),
                                Text(htmlText),
                              ]),
                            )),
                        Card(
                            color: Colors.grey.shade200,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Column(children: <Widget>[
                                Text("Features",
                                    style: TextStyle(
                                        fontSize: 17,
                                        fontWeight: FontWeight.bold)),
                                Text(htmlText + htmlText),
                              ]),
                            )),
                      ],
                    ),
                    Expanded(
                      child: Container(
                        child: Text('All remaining space'),
                        color: Colors.red,
                      ),
                    )
                  ],
                ),
                //TAB 2
                ListView(
                  children: <Widget>[
                    Card(
                        color: Colors.grey.shade200,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(children: <Widget>[
                            Text("Features",
                                style: TextStyle(
                                    fontSize: 17, fontWeight: FontWeight.bold)),
                            Text(htmlText),
                          ]),
                        )),
                    Card(
                        color: Colors.grey.shade200,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(children: <Widget>[
                            Text("Features",
                                style: TextStyle(
                                    fontSize: 17, fontWeight: FontWeight.bold)),
                            Text(htmlText + htmlText),
                          ]),
                        )),
                  ],
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.