如何在flutter中调整TabBarView的高度以适应孩子们？

Question

class MyWidget extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return ListView(\n      children: [\n        Card(\n          child: DefaultTabController(\n            length: 2,\n            child: Column(\n              children: const [\n                TabBar(\n                  tabs: [\n                    Tab(icon: Icon(Icons.cloud_outlined)),\n                    Tab(icon: Icon(Icons.beach_access_sharp)),\n                  ],\n                ),\n                SizedBox(\n                  height: 300, // delete this.\n                  child: TabBarView(\n                    children: [\n                      //ListView(shrinkWrap: true) \xe2\x86\x90 and adjust the TabBarView to the height of this.\n                      Text(''),\n                    ],\n                  ),\n                ),\n              ],\n            ),\n          ),\n        ),\n      ],\n    );\n  }\n}\n

\n

我正在制作一张卡片，允许您使用 TabBar 切换内容。我想让 TabBarView 的高度与子级 ListView 的高度相匹配，但是当我删除 SizedBox 或使用 Expanded 时出现错误。您能否建议我也选择使用其他小部件？

\n

Answer 1

尝试这个 -

class MTabs extends StatefulWidget {
  @override
  _StackOverState createState() => _StackOverState();
}

class _StackOverState extends State<MTabs>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(8.0),
        color: Theme.of(context).primaryColor,
        child: Column(
          children: [
            // give the tab bar a height [can change height to preferred height]
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: Theme.of(context).backgroundColor,
                borderRadius: BorderRadius.circular(
                  25.0,
                ),
              ),
              child: TabBar(
                controller: _tabController,
                // give the indicator a decoration (color and border radius)
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    25.0,
                  ),
                  color: Theme.of(context).accentColor,
                ),
                labelColor: Theme.of(context).textSelectionColor,
                unselectedLabelColor: Theme.of(context).textSelectionColor,
                tabs: [
                  // first tab [you can add an icon using the icon property]
                  const Tab(
                    text: ViewStrings.txtTab1,
                  ),

                  // second tab [you can add an icon using the icon property]
                  const Tab(
                    text: ViewStrings.txtTab2,
                  ),
                  // second tab [you can add an icon using the icon property]
                  Tab(
                    text: ViewStrings.txtTab3,
                  ),
                ],
              ),
            ),
            // tab bar view here
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: const [
                  //  tab bar view widget
                  Tab1(),
                  Tab2(),
                  Tab3(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}