flutter - 停靠在 Flutter 中的可扩展浮动操作按钮

问题描述

我想创建一个可扩展的中心停靠浮动操作栏按钮。可展开的浮动动作按钮的当前设计如图所示

浮动操作按钮是一列转换小部件，当按下底部切换按钮时会展开/折叠。浮动操作按钮位于中心停靠，形状为 CircularNotchedRectangle，notchMargin 为 10。但是，此方法在折叠和展开时会产生不需要的背景（按钮后面的形状）。我希望它能够看起来像这样。

我将如何尝试解决这个问题。

浮动操作按钮的代码如下所示

floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Transform(
              transform: Matrix4.translationValues(
                  0.0, _translateButton!.value * 3.0, 0.0),
              child: buttonAdd()),
          Transform(
            transform: Matrix4.translationValues(
                0.0, _translateButton!.value * 2.0, 0.0),
            child: buttonFile(),
          ),
          Transform(
            transform:
                Matrix4.translationValues(0.0, _translateButton!.value, 0.0),
            child: buttonFolder(),
          ),
          buttonToggle(),
          SizedBox(height: 30),
        ],
      ),

和按钮导航栏的代码

bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          color: default_background_color,
          notchMargin: 10,
          child: Container(
            height: 60,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    MaterialButton(
                      onPressed: () {},
                      child: Icon(Icons.home, color: Colors.blue),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    MaterialButton(
                      onPressed: () {},
                      child: Icon(Icons.settings, color: Colors.blue),
                    )
                  ],
                )
              ],
            ),
          ),
),

标签： flutterandroid-studio

flutter - 停靠在 Flutter 中的可扩展浮动操作按钮

问题描述

解决方案

推荐阅读