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

Question

我想知道是否有一种方法可以将浮动动作按钮停靠在CupertinoTabBar中。我想得到如下图的结果

我的屏幕安排如下

• CupertinoTabScaffold
  • CupertinoTabView
    • CupertinoPageScaffold
      • CupertinoNavigationBar
      • 脚手架
  • 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

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

jtc

将 floatingActionButton 分成一个独立的类 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, ), ), ], ); } } ，允许我们为小部件提供更多功能，在这种情况下，在 FloatingAction 中，使用 Column 允许我们执行对齐到小部件的底部，并使用 mainAxisAlignment: MainAxisAlignment.end,，允许我们在屏幕边缘定义一个位置，从这个意义上说，它只剩下用 { 定位按钮的首选高度{1}}容器

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

在 bottom 中执行此过程将使我们将来可以根据需要添加更多浮动按钮。

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

Answer 2

对于某些正在寻找代码段的人，我将为您提供一个有效的示例。

student lesson  score   Date
Allen   Math    12      9/11/12
Allen   Math    19      9/11/14
Allen   Physics 10      9/11/12
Joe     Physics 15      9/11/12
Joe     Physics 13      9/11/15

点是

1. 使用student lesson score Date Allen Math 19 9/11/14 Allen Physics 10 9/11/12 Joe Physics 13 9/11/15 。如果您使用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(), ); } } ，则将无法使用scaffold。

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

3. 您需要FAB或类似的东西来处理floatingActionButtonLocation的更改。

Answer 3

您可以将CupertinoTabScaffold包裹在脚手架中，例如

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