我可以将浮动操作按钮停靠在 CupertinoTabBar 中吗？

Question

我想知道是否有办法将浮动操作按钮停靠在 CupertinoTabBar 中。我想得到如下图所示的结果

我的屏幕组织如下

• CupertinoTab 支架
  • CupertinoTabView
    • CupertinoPageScaffold
      • 库比蒂诺导航栏
      • 脚手架
  • CupertinoTabBar

我尝试将以下代码添加到我的 Scaffold，但结果不是我想要的。我知道问题是 TabBar 不在脚手架内，因此它没有停靠但是我想知道是否有办法将浮动按钮放在其他地方以获得我想要的结果

这里是代码

child: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton.extended(
          backgroundColor: kColorAccent,
          onPressed: () {},
          label: Text('To my Favorites!'),
          icon: Icon(Icons.favorite),
        ),

这是我得到的结果......

Answer 1

和大家一样，我花了一些时间寻找这个问题的最佳答案，在仔细分析代码后我找到了解决方案，并在下面分享，这是我工作的项目的一个片段，但它可以通用

import 'package:app_example/floatingAction.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

@override
initState() {
  super.initState();

}

@override
Widget build(BuildContext context) {

return Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
  floatingActionButton: FloatingAction(),

  bottomNavigationBar: CupertinoTabScaffold(
    
      tabBar: CupertinoTabBar(
          activeColor: Colors.red,
          inactiveColor: Colors.grey,
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.loyalty_outlined,
              ),
              label: "Productos",
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.people,
              ),
              label: 'Clientes',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.shopping_cart_outlined,
              ),
              label: 'Ventas',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.timeline,
              ),
              label: "Historial",
            ),
          ]),
      tabBuilder: (BuildContext contex, int index) {
        
        switch (index) {
          case 0:
            return CupertinoTabView(
              builder: (BuildContext context) => ProductScreen(),
            );
            break;
          case 1:
            return CupertinoTabView(
              builder: (BuildContext context) => ClientScreen(),
            );
            break;
          case 2:
            return CupertinoTabView(
              builder: (BuildContext context) => MarketScreen(),
            );
            break;
          case 3:
            return CupertinoTabView(
              builder: (BuildContext context) => HistoryScreen(),
            );
            break;
        }
        return null;
      }),
  );
 }
 }

class FloatingAction extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Column(
   mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(
              margin: EdgeInsets.only(bottom:70),
              child: FloatingActionButton(
              onPressed: () {
                print('click en botton');
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) =>NewMarket()),
                );
              },
              child: Icon(Icons.queue),
              backgroundColor: Colors.red,
            ),
    ),
  ],
);
 }
}

将floatingActionButton 分离成一个独立的类FloatingAction，允许我们为小部件提供更多功能，在这种情况下，在 Column 中，mainAxisAlignment: MainAxisAlignment.end, 允许我们与底部对齐小部件，以及floatingActionButtonLocation: FloatingActionButtonLocation.endTop,，允许我们在屏幕边缘定义一个位置，从这个意义上说，它只需要使用margin: EdgeInsets.only ( bottom: 70), of 容器定位按钮的首选高度

要使按钮居中，我们只需更改margin: EdgeInsets.only (bottom: 70, right: MediaQuery.of (context) .size.width / 2 - 45),，bottom 将指示高度， right 参考中心的位置。

在Column 中执行此过程将允许我们在将来根据需要添加更多浮动按钮。

现在可以使用带有 CupertinoTapBar 的 floatingActionButton

Answer 2

您可以将 CupertinoTabScaffold 包裹在 Scaffold 中，例如

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: buildYourScafold(context),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(
            Icons.add,
          ),
        ));
  }

Answer 3

对于一些正在寻找代码 sn-p 的人，我会给你一个工作示例。

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeState();
  }
}

class HomeState extends State<Home> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          Navigator.of(context).push(
              // this can also be `MaterialPageRoute`
              CupertinoPageRoute(
                fullscreenDialog: true,
                // typical full screen dialog behavior
                builder: (_) => ModalPage(),
              )
          );
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: CupertinoTabBar(
        currentIndex: _index,
        onTap: (newIndex) {
          setState(() {
            _index = newIndex;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.today),
            title: Text("today"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.timeline),
            title: Text("stats"),
          ),
        ],
      ),
      /**
       * You can use switch here,
       * for the sake of brevity, I only used two tabs
       */
      body: _index == 0 ? Page1() : Page2(),
    );
  }
}

点是

1. 使用scaffold。如果您使用CupertinoTabScaffold，那么您将无法使用FloatingActionbutton。

2. 您可以使用floatingActionButtonLocation 将FAB 移动到任何位置。

3. 你需要StatefulWidget 或类似的东西来处理index 的变化。