无法在Flutter中为TabBarView设置动态高度 [英] Cannot set dynamic height for TabBarView in flutter

问题描述

我正在尝试创建位于页面中间的TabBar(描述"小部件必须位于顶部).

I am trying to create TabBar which would be located in the middle of the page (Description widget must be at the top).

问题是我必须手动设置包含TabBarView的Container小部件的高度.如果我不设置此高度，则会出现错误水平视口被赋予无限制的高度..

The problem is that I have to manually set the height of the Container widget which contains TabBarView. If I leave it without this height, I get error Horizontal viewport was given unbounded height..

顶级小部件:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[Description(), Tabs()],
        ),
      ),
    );
  }

标签小部件:

class Tabs extends StatelessWidget {
  final _tabs = [
    Tab(
      icon: Icon(Icons.menu),
      text: 'Menu',
    ),
    Tab(
      icon: Icon(Icons.mode_comment),
      text: 'Reviews',
    )
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _tabs.length,
        child: Column(
          children: <Widget>[
            TabBar(
              labelColor: PickColors.black,
              indicatorSize: TabBarIndicatorSize.tab,
              tabs: _tabs,
            ),
            Container(
              width: double.infinity,
              height: 200, // I need to remove this and make height dynamic
              child: TabBarView(
                children: <Widget>[MenuTab(), ReviewsTab()],
              ),
            ),
          ],
        ));
  }
}

由于制表符的内容将是动态的，因此高度也将是动态的.我不能在这里使用静态高度.

Since Tabs content will be dynamic, the height will also be. I cannot use static height here.

对于具有固定高度的容器，是否有替代方法?如何使标签的高度动态变化?

Is there an alternative for the Container with static height? How can I make my tabs' height dynamic?

推荐答案

我已解决此问题，方法是将SingleChildScrollView更改为ListView，并编写了自己的TabView小部件，该小部件在Stack包装器中包含标签.

I have fixed this issue by changing SingleChildScrollView into ListView and writing my own TabView widget which contains tabs in Stack wrapper.

顶级小部件主体包装器从Column和SingleChildScrollView更改为ListView:

Top level widget body wrappers changed from Column and SingleChildScrollView to ListView:

  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      appBar: RestaurantInfoAppBar(),
      body: ListView(
        children: <Widget>[Description(), Tabs()],
      ),
    );
  }

标签小部件-删除了具有静态宽度包装器的容器:

Tabs widget - removed Container with a static width wrapper:

  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _tabs.length,
        child: Column(
          children: <Widget>[
            TabBar(
              labelColor: PickColors.black,
              indicatorSize: TabBarIndicatorSize.tab,
              tabs: _tabs,
            ),
            TabsView(
              tabIndex: _tabIndex,
              firstTab: MenuTab(),
              secondTab: ReviewsTab(),
            )
          ],
        ));
  }

新的自定义TabsView组件当前仅处理两个选项卡(因为我只需要两个)，但是可以轻松更改以处理动态数量的选项卡:

New custom TabsView component currently handles only two tabs (since I only need two) but can be easily changed to handle dynamic numbers of tabs:

class TabsView extends StatelessWidget {
  TabsView(
      {Key key,
      @required this.tabIndex,
      @required this.firstTab,
      @required this.secondTab})
      : super(key: key);

  final int tabIndex;
  final Widget firstTab;
  final Widget secondTab;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AnimatedContainer(
          child: firstTab,
          width: SizeConfig.screenWidth,
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
          transform: Matrix4.translationValues(
              tabIndex == 0 ? 0 : -SizeConfig.screenWidth, 0, 0),
          duration: Duration(milliseconds: 300),
          curve: Curves.easeIn,
        ),
        AnimatedContainer(
          child: secondTab,
          width: SizeConfig.screenWidth,
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
          transform: Matrix4.translationValues(
              tabIndex == 1 ? 0 : SizeConfig.screenWidth, 0, 0),
          duration: Duration(milliseconds: 300),
          curve: Curves.easeIn,
        )
      ],
    );
  }
}

P.S.SizeConfig与MediaQuery.of(context).size.width相同.

P.S. SizeConfig is the same as MediaQuery.of(context).size.width.

希望这可以帮助像我这样的人！:)

Hope this helps someone like me! :)

这篇关于无法在Flutter中为TabBarView设置动态高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！