1

我的标签栏和卡片小部件中有两个标签，它们构成了两个标签栏视图。在这种情况下，我使用的是 Slivers。CustomScrollView 是我的父小部件。我在这些视图中显示文本，但它们从底部占用了额外的空白间距，我想摆脱它。如果这些小部件放置在 tabbarview 之外，它们可以正常工作并根据它们的内容调整高度。我在外面添加的最后一个小部件tabbarview，你可以看到它工作正常。

在此处输入图像描述

这是我的代码：

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),
                      ]),
                    )),
              ),
            )
          ],
        ),
      ),
    );
  }
}
4

1 回答 1

1 
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),
                          ]),
                        )),
                  ],
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}
于 2020-04-25T12:53:44.963 回答