如何修复 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 小部件将按钮放置在脚手架的右上角 object。

试试这样的东西：

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 函数将用于切换其可见性

Answer 2

@Hussein Adballah

谢谢！我的布局已经完成了want.But感觉还有很长的路要走

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('tabbar demo...'),
      elevation: 0.0,
    ),
    body: Stack(children: [
      Row(
        children: <Widget>[
          Expanded(
            child: TabBar(
              labelColor: Colors.red[300],
              unselectedLabelColor: Colors.black38,
              indicator: BoxDecoration(),
              controller: _controller,
              isScrollable: true,
              tabs: <Widget>[
                Tab(text: 'cate_1'),
                Tab(text: 'cate_2'),
                Tab(text: 'cate_3'),                            
                Tab(text: 'cate_4'),
                Tab(text: 'cate_5'),
                Tab(text: 'cate_6'),
                Tab(text: 'cate_7'),
                Tab(text: 'cate_8'),
                Tab(text: 'cate_9'),
              ],
            ),
          ),
          Container(
            width: 40.0, 
            child: Icon(Icons.more_horiz, color: Colors.black26,),
          )
        ],
      ),
      Container(
        margin: EdgeInsets.only(top: 46.0),
        child: Text('xxxxxxxxxx'),
      )
    ]),
  );
}

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

How to fix the last item of Tabbar widget?

flutter

flutter-layout