当把 "纵向 "改为 "横向 "时,失去了FloatingActionButton状态。

问题描述 投票:0回答:1

我正在建立一个应用程序,其中包含我自己定制的浮动动作按钮,当它被按下时,它下面会显示3个菜单图标。

有两个问题。

  1. 当方向改变为横向时,我们按浮动动作按钮时,它不会显示,而当我们按长键时它会显示,继续第2个问题。
  2. 在目前的横屏中,就像我在第1条中说的那样,长按可以显示,而当我们再次回到纵向时,需要再次长按才能显示。

我一直在尝试一些方法让它修复,但还是不行。

下面是代码和截图

当出现纵向菜单时

当切换到横向时,菜单图标不见了,需要长按才能显示。

for floatingActionButton

    floatingActionButton: OrientationBuilder(
        builder: (BuildContext context, Orientation orientation){
           return orientation == Orientation.landscape
           ? _buildMenu(context)
           : _buildMenu(context);
        },
      ),

调用floatingActionButton的_buildMenu()。

Widget _buildMenu(BuildContext context){
final icons = [ Icons.swap_vert, Icons.check_circle_outline, Icons.filter_list ];   
var nowOrientation = MediaQuery.of(context).orientation;

var b = Container(
  child: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints){
      return OverlayBuilder(
        showOverlayTrue: true,
        overlayBuild: (BuildContext overlayContext){
          RenderBox box = context.findRenderObject() as RenderBox;
          final center = box.size.center(box.localToGlobal(const Offset(0.8, 0.8)));

           return new Positioned(
            top: Offset(center.dx, center.dy - icons.length * 35.0).dy,
            left: Offset(center.dx, center.dy - icons.length * 35.0).dx,
            child: new FractionalTranslation(
              translation: const Offset(-0.5, -0.6),
              child: FabIcons(
                icons: icons,
              ),
            ),
          );
        },
      );
    },
  ),
);}

为了使其在查看时更简单,我在github上放了一些代码。

OverlayBuilder类 https:/github.comubaidillahSriyudiStackOverflowhelpblobmasterOverlayBuilderClass。

Fabicons类 https:/github.comubaidillahSriyudiStackOverflowhelpblobmasterFabIcons。

非常感谢有人能帮助它

flutter dart flutter-layout flutter-animation
1个回答
0
投票

发生这种情况是因为每次你改变方向,你的FloatingActionButton都会重建并失去状态。

你应该找到一种方法来保存FabIcons小组件的状态。


简单的解决方案。

构建FabIcons小组件与

 icons,
 iconTapped; 

这些变量应该保存在Parent Widget中,所以每次调用 _buildMenu(context); 你传入这些变量

© www.soinside.com 2019 - 2024. All rights reserved.