7

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

在此处输入图像描述

我的屏幕组织如下

  • CupertinoTab 脚手架
    • CupertinoTabView
      • 库比蒂诺页脚手架
        • 库比蒂诺导航栏
        • 脚手架
    • 库比蒂诺标签栏

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

这是代码

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

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

在此处输入图像描述

4

3 回答 3

2

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

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，使用 amainAxisAlignment: 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参考中心的位置。

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

图片

图片

现在可以使用带有 CupertinoTapBar 的 floatingActionButton

于 2021-01-28T23:48:22.950 回答
0

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

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. 您可以使用 移动FAB到任何位置floatingActionButtonLocation。

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

于 2020-02-16T12:50:42.573 回答
-1

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: buildYourScafold(context),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(
            Icons.add,
          ),
        ));
  }
于 2020-11-04T12:04:11.507 回答