android - 具有FAB风格的自定义按钮

Question

我想制作一组像FAB按钮一样具有波纹效果，高程和形状的按钮。我读到我每个屏幕只能使用一个FAB按钮，因此我需要创建自己的屏幕，而不是使用一组FAB按钮。

如何达到效果？是否可以将FAB代码修改为此？

Answer 1

因此，如果您希望晶圆厂以垂直顺序排列，则将它们包装在列中，如下所示

class RandomFabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FloatingActionButton(
            child: Icon(Icons.home, color: Colors.white,),
            onPressed: (){},
            backgroundColor: Colors.cyan,
          ),
          SizedBox(height: 10,),
          FloatingActionButton(
            child: Icon(Icons.playlist_play, color: Colors.white,),
            onPressed: (){},
            backgroundColor: Colors.red,
          ),
          SizedBox(height: 10,),
          FloatingActionButton(
            child: Icon(Icons.person, color: Colors.white,),
            backgroundColor: Colors.yellow,
            onPressed: (){},
          ),
          SizedBox(height: 10,),
          FloatingActionButton(
            child: Icon(Icons.warning, color: Colors.white,),
            onPressed: (){},
            backgroundColor: Colors.blue,
          ),
        ],
      ),
    );
  }
}

输出:

如果要按水平顺序排列它们，请将其包装在行中

像这样

class RandomFabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FloatingActionButton(
            child: Icon(Icons.home, color: Colors.white,),
            onPressed: (){},
            backgroundColor: Colors.cyan,
          ),
          SizedBox(width: 10,),
          FloatingActionButton(
            child: Icon(Icons.playlist_play, color: Colors.white,),
            onPressed: (){},
            backgroundColor: Colors.red,
          ),
          SizedBox(width: 10,),
          FloatingActionButton(
            child: Icon(Icons.person, color: Colors.white,),
            backgroundColor: Colors.yellow,
            onPressed: (){},
          ),
          SizedBox(width: 10,),
          FloatingActionButton(
            child: Icon(Icons.warning, color: Colors.white,),
            onPressed: (){},
            backgroundColor: Colors.blue,
          ),
        ],
      ),
    );
  }
}

输出: