flutter - 如何修复 Tabbar 小部件的最后一项？

Question

在使用tabbar widget的过程中，我需要展示12种左右，即使可以左右拖拽，但还是太麻烦了，所以希望他们提供另一种方式在最后展示一个按钮选项卡显示。左右拖动tabbar时，按钮始终显示在末尾，点击时看起来像悬浮在顶部。当您按下按钮时，向下滑动面板以另一种方式显示这 12 种类型。

如何添加这个按钮？

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Tabbar test',
      home: Scaffold(
        body: TabbarDemoPage(),
      )
    );
  }
}

class TabbarDemoPage extends StatefulWidget {
  _TabbarDemoPageState createState() => _TabbarDemoPageState();
}

class _TabbarDemoPageState extends State<TabbarDemoPage> with SingleTickerProviderStateMixin {
  TabController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Keep Alive Demo'),
        bottom: TabBar(
          controller: _controller,
          isScrollable: true,
          tabs: <Widget>[
            Tab(text: 'category_1'),
            Tab(text: 'category_2'),
            Tab(text: 'category_3'),
            Tab(text: 'category_4'),
            Tab(text: 'category_5'),
            Tab(text: 'category_6'),
            Tab(text: 'category_7'),
            Tab(text: 'category_8'),
            Tab(text: 'category_9'),
          ],
        ),
        elevation: 0.0,
      ),
      body: TabBarView(
        controller: _controller,
        children: <Widget>[
          Center(child: Text('category 1')),
          Center(child: Text('category 2')),
          Center(child: Text('category 3')),
          Center(child: Text('category 4')),
          Center(child: Text('category 5')),
          Center(child: Text('category 6')),
          Center(child: Text('category 7')),
          Center(child: Text('category 8')),
          Center(child: Text('category 9')),
        ],
      ),
    );
  }
}

Answer 1

您可以使用 Stack 小部件将按钮放置在脚手架对象的右上角。

尝试这样的事情:

Stack(children: [
    Positioned(
    // set appropriate positioning
    CustomButton(..),
    )
    TabBar(
      controller: _controller,
      isScrollable: true,
      tabs: <Widget>[
        Tab(text: 'category_1'),
        Tab(text: 'category_2'),
        Tab(text: 'category_3'),
        Tab(text: 'category_4'),
        Tab(text: 'category_5'),
        Tab(text: 'category_6'),
        Tab(text: 'category_7'),
        Tab(text: 'category_8'),
        Tab(text: 'category_9'),
      ],
    ),
])

设置好底部后，您还可以在 body 上使用堆栈来显示面板，按钮的 onTap 函数将用于切换其可见性