scaffold - 我可以在 CupertinoTabBar 中停靠 float 操作按钮吗？

Question

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



我的屏幕组织如下

CupertinoTab 脚手架

库比蒂诺标签 View

库比蒂诺页脚手架

CupertinoNavigationBar

脚手架

CupertinoTabBar

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

这是代码

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 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), 来定位按钮的首选高度。容器
要使按钮居中，我们只需更改 margin: EdgeInsets.only (bottom: 70, right: MediaQuery.of (context) .size.width / 2 - 45), bottom将指示高度， right引用中心的位置。
在 Column 中执行此过程如果需要，将允许我们在 future 添加更多 float 按钮。


现在可以使用 CupertinoTapBar 处理 float 操作按钮