繁体   English   中英

如何覆盖 Flutter TabBar Tab 以用作 FloatingActionButton?

[英]How do I override a Flutter TabBar Tab to work as a FloatingActionButton?

我正在尝试实现此功能:

在此处输入图像描述

当我按下最后一个 Tab 按钮时,我不想更改为任何视图。 我只想显示这两个按钮,无论我在哪个视图上。

我试过这个解决方案,但没有用。

到目前为止,这是我的代码

class MainViewState extends State<MainView> {
  var tabsList = [
    Tab1View(),
    Tab2View(),
    Tab3View(),
    Tab4View()
  ];

  @override
  Widget build(BuildContext context) {
    return ViewModelProvider<MainViewModel>.withConsumer(
        viewModel: MainViewModel(),
        builder: (context, viewModel, child) => DefaultTabController(
            length: tabsList.length,
            child: Scaffold(
                drawer: mainViewDrawerHeader(context),
                appBar: AppBar(
                  title: Text('Sample Text'),
                  centerTitle: true,
                ),
                body: TabBarView(children: tabsList),
                bottomNavigationBar: TabBar(
                  labelPadding: EdgeInsets.symmetric(horizontal: 0.0),
                  labelStyle:
                      TextStyle(fontSize: 14.5, fontWeight: FontWeight.bold),
                  unselectedLabelStyle: TextStyle(fontSize: 12.0),
                  tabs: <Widget>[
                    Tab(
                      icon: Icon(Icons.monetization_on),
                      text: 'Tab 1',
                    ),
                    Tab(
                      icon: Icon(Icons.monetization_on),
                      text: 'Tab 2',
                    ),
                    Tab(
                      icon: Icon(Icons.credit_card),
                      text: 'Tab 3',
                    ),
                    Tab(
                      icon: Icon(Icons.phone),
                      text: 'Tab 4',
                    ),
                  ],
                  labelColor: Colors.red,
                  unselectedLabelColor: Colors.grey,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicatorColor: Colors.red,
                  onTap: (_) => {},
                ))));
  }
}

是的,go 的一种简单方法是使用“ Visibility ”小部件。

只需将包含可见性小部件中的按钮的列包装起来。

例如

bool isClicked = false;

Visibility(
  visible: isClicked,
  child: Column(
    children : [
     Icon(Icons.phone),
     Icon(Icons.user),
     ],
   )
),

现在在您的 Fab 项目中执行以下操作:

FabItem(
    "Contacto",
    Icons.phone,
    onPress: () {
    _controller.reverse();
    sisClicked  = true;
    },
),

有关可见性小部件的更多信息。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM