我正在try 创建选项卡栏,这将位于页面的中间(描述小工具必须在顶部).

问题是,我必须手动设置包含TabBarView的容器小部件的高度.如果没有这个高度,我会得到错误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()],
              ),
            ),
          ],
        ));
  }
}

由于选项卡内容将是动态的,因此高度也将是动态的.我不能在这里使用静态高度.

对于静态高度的容器是否有其他 Select ?如何使标签的高度动态?

推荐答案

我已经通过将SingleChildScrollView更改为ListView并编写自己的TabView小部件解决了这个问题,该小部件在堆栈包装器中包含选项卡.

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

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

Tabs小部件-已移除带有静态宽度包装的容器:

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

新的自定义TabView组件目前只处理两个选项卡(因为我只需要两个),但是可以很容易地进行更改,以处理动态数量的选项卡:

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相同.关于(上下文).大小宽度

希望这能帮助像我这样的人!:)

Dart相关问答推荐

如何映射作为DART中其他模型基础的复杂模型

带有字符串键的 Dart Map,与忽略大小写进行比较

浮动操作按钮:如何像 RaisedButton 一样更改启动 colored颜色 和突出显示 colored颜色 ?

Task 'app:processDebugResources'的Flutter执行失败

如何在 Flutter 中向 AnimationController 添加 Curves 类动画?

Dart:使用正则表达式从字符串中删除空格

Flutter.io (dart) - 如何创建左填充覆盖?

在`lib`文件夹中使用`src`子文件夹有什么好处吗

如何防止意外发布私有 pub 包

dart 中 call() 的实现是什么?

在小部件之间画一条线

try 部署到 Google AppEngine 时出现 Dev_appserver.py 错误

IOS中Webview Flutter字体太小

从列表中删除项目后更新 UI

在 Flutter 中保持响应的同时制作持久的背景图像

将Dart嵌入到应用程序中

如何在dart中获取 map 的键列表?

将函数/方法分配给 Dart 中的变量

比较在 Dart 中创建单例的方法

在 DART 中创建泛型类型的实例