【问题标题】:Lost FloatingActionButton State when change Portrait to Landsacpe将纵向更改为横向时丢失浮动操作按钮状态
【发布时间】:2020-08-24 22:11:02
【问题描述】:

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

有2个问题:

  1. 当方向变为横向时,我们按下浮动按钮它不会显示,而不是当我们长按时会显示,继续no 2
  2. 在当前的风景中,它会像我在第 1 节中所说的那样长按显示,当我们再次返回肖像时,它需要再次长按才能显示

我一直在尝试一些方法来修复它,但它仍然不起作用。

这是代码和截图

When portrait menu show up

When changing to landscape, menu icons are missing and need long press to make it show

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.com/ubaidillahSriyudi/StackOverflowhelp/blob/master/OverlayBuilderClass

Fabicons 类 https://github.com/ubaidillahSriyudi/StackOverflowhelp/blob/master/FabIcons

非常感谢可以帮助它的人

【问题讨论】:

    标签: flutter dart flutter-layout flutter-animation


    【解决方案1】:

    发生这种情况是因为每次您更改方向时,您的 FloatingActionButton 都会重建并丢失状态。

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


    简单的解决方案:

    使用

    构建 FabIcons 小部件
     icons,
     iconTapped; 
    

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

    【讨论】:

    • 我试过这个 FabIcons(icons: icons, iconTapped: _selectedFab, ), void _selectedFab(int index){ setState(() { _lastSelected = 'FAB: $index'; }); } 但还是不行
    猜你喜欢
    • 2014-04-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-15
    • 1970-01-01
    • 1970-01-01
    • 2023-03-17
    相关资源
    最近更新 更多