Flutter Vertical Tabs 只在水平方向滚动答案

【问题标题】：Flutter Vertical Tabs only scrolls in horizontal directionFlutter Vertical Tabs 只在水平方向滚动
【发布时间】：2021-06-13 22:45:03
【问题描述】：

我在 Flutter 2.0.2 上使用了 vertical_tabs: ^0.2.0 包并在 android 虚拟设备上运行。但垂直标签仅水平滚动。我从演示中复制了确切的代码 Flutter Vertical_tabs。找不到问题。

    import 'package:flutter/material.dart';
    import 'package:vertical_tabs/vertical_tabs.dart';

    void main() {
      runApp(Home());
    }

    class Home extends StatefulWidget {
      @override
      _HomeState createState() => _HomeState();
    }

    class _HomeState extends State<Home> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: VerticalTabs(
            tabs: <Tab>[
              Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
              Tab(child: Text('Dart')),
              Tab(child: Text('NodeJS')),
              Tab(child: Text('PHP')),
              Tab(child: Text('HTML 5')),
            ],
            contents: <Widget>[
              Container(child: Text('Flutter'), padding: EdgeInsets.all(20)),
              Container(child: Text('Dart'), padding: EdgeInsets.all(20)),
              Container(child: Text('NodeJS'), padding: EdgeInsets.all(20)),
              Container(child: Text('PHP'), padding: EdgeInsets.all(20)),
              Container(child: Text('HTML 5'), padding: EdgeInsets.all(20))
            ],
          ),
        );
      }
    }

【问题讨论】：

Tabs 垂直滚动是指选择新标签时的动画过渡是水平滚动，但您希望TabBar 以及 Animation 垂直滚动？
这里的代码应该垂直滚动（文档）。但水平滚动。不是动画过渡。

标签： flutter dart dart-pub

【解决方案1】：

VerticalTab 小部件有两个可能的内容滚动方向：垂直和水平。即使小部件称为 VerticalTab，滚动轴默认为水平。修复很简单，将contentScrollAxis 设置为Axis.vertical，如下所示：

@override
Widget build(BuildContext context) {
  return VerticalTabs(
    contentScrollAxis: Axis.vertical,
    tabs: <Tab>[
      // Your tabs
    ],
    contents: <Widget>[
      // Your content
    ],
  );
}

【讨论】：

我会试试这个。但你的意思是他们在文档中有错误吗？
不，我的意思是它可能有点不直观，因为命名。 :D

【解决方案2】：

这里，

import 'package:flutter/material.dart';
import 'package:vertical_tabs/vertical_tabs.dart';

void main() {
  runApp(Home());
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalTabs(
        contentScrollAxis: Axis.vertical,
        tabs: <Tab>[
          Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
          Tab(child: Text('Dart')),
          Tab(child: Text('NodeJS')),
          Tab(child: Text('PHP')),
          Tab(child: Text('HTML 5')),
        ],
        contents: <Widget>[
          Container(child: Text('Flutter'), padding: EdgeInsets.all(20)),
          Container(child: Text('Dart'), padding: EdgeInsets.all(20)),
          Container(child: Text('NodeJS'), padding: EdgeInsets.all(20)),
          Container(child: Text('PHP'), padding: EdgeInsets.all(20)),
          Container(child: Text('HTML 5'), padding: EdgeInsets.all(20))
        ],
      ),
    );
  }
}

【讨论】：

除非提供描述，否则共享代码无济于事。