flutter - 如何修复 Tabbar 小部件的最后一项?
问题描述
在使用 tabbar 小部件的过程中,我需要显示大约 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')),
],
),
);
}
}
解决方案
您可以使用 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 功能将用于切换其可见性
推荐阅读
- google-bigquery - bigQuery 中分片表和通配符表的区别。如何在 bigquery 中创建分片表
- postgresql - 安装 PgBouncer 时遇到问题(postgresql12-libs)
- git - .gitignore 不忽略文件夹内的文件
- javascript - Laravel 翻译文件中的 Javascript 调用
- mysql - 我尝试获取一些按日期、编号排序的数据,并获取每件商品的最新价格
- android - 无法在 Android 应用上播放此视频错误
- javascript - Chrome 提示出现过快
- python - 字符串问题/在熊猫数据框中选择所有值> 8000
- python - 如何使 Jupyter Notebook 指向与 Ubuntu 上的终端相同的 Python 安装?
- azure - 登录 Azure 应用服务运行实例