如何覆蓋 Flutter TabBar Tab 以用作 FloatingActionButton？

Question

我正在嘗試實現此功能：

當我按下最后一個 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: (_) => {},
                ))));
  }
}

Answer 1

是的，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;
    },
),

有關可見性小部件的更多信息。