Question

在使用标签栏小部件的过程中，即使可以左右拖动，我也需要显示大约12种类型，但这仍然很麻烦，因此我希望它们提供另一种方式来显示按钮选项卡显示。左右拖动标签栏时，该按钮始终显示在末尾，单击时看起来好像浮在顶部。按下按钮时，向下滑动面板以其他方式显示这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(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'),
      ],
    ),
])

一旦设置好底部，您还可以在身体上使用一个堆栈来显示面板，并且按钮onTap功能将用于切换其可见性

Answer 2

@侯赛因·阿德巴拉

谢谢！我已经完成了想要的布局。但是我还有很长的路要走。

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小部件的最后一项？

2 个答案: