如何设置 snackbar 和浮动操作按钮之间的距离？

Question

如何设置快餐栏和浮动操作按钮之间的距离？

Answer 1

你不能设置！！它与底部加上 SnackBar 高度相同。

但如果你想调整它，你可能不会使用 Scaffold 中的 FAB，而是将主体设为 Stack，最新层是你的 FAB，并将其包裹在 AnimatedPositioned 这样您就可以根据需要使用与底部的适当距离为其设置动画。

Answer 2

你试过了吗

floatingActionButton: Column(mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end, children: [
  FloatingActionButton(
    onPressed: _doOrder,
    mini: false,
    elevation: 10,
    child: Icon(EvaIcons.shoppingBagOutline),
  ),
  Container(
    height: 50,
  )
]),

Answer 3

如果您希望 FloatingActionButton 始终具有底部填充，您可以用 Padding 小部件将其包装起来，如下所示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: Padding(
      padding: EdgeInsets.only(bottom: 40.0),
      child: FloatingActionButton(
        onPressed: () {},
      ),
    ),
    appBar: AppBar(
      title: Text('SnackBar'),
    ),
    body: Builder(
      builder: (context) => RaisedButton(
        onPressed: () => _displaySnackBar(context),
        child: Text('Show SnackBar'),
      ),
    ),
  );
}

如果您希望 FloatingActionButton 在 SnackBar 可见时有新的填充，您可以在显示 SnackBar 时更改填充，如下所示：

double _fabPadding = 0.0;

_displaySnackBar(BuildContext context) {
  final snackBar = SnackBar(content: Text('SnackBar'));
  setState(() {
    _fabPadding = 40.0;
  });
  Scaffold.of(context).showSnackBar(snackBar).closed.then((_) {
    setState(() {
      _fabPadding = 0.0;
    });
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: Padding(
      padding: EdgeInsets.only(bottom: _fabPadding),
      child: FloatingActionButton(
        onPressed: () {},
      ),
    ),
    appBar: AppBar(
      title: Text('SnackBar'),
    ),
    body: Builder(
      builder: (context) => RaisedButton(
        onPressed: () => _displaySnackBar(context),
        child: Text('Show SnackBar'),
      ),
    ),
  );
}

编辑： 如果你想避免 SnackBar 推到 FloatingActionButton 的位置，你可以设置属性的行为SnackBar 至 SnackBarBehavior.floating

SnackBarBehavior

floating → const SnackBarBehavior This behavior will cause SnackBar to be shown above other widgets in the Scaffold. This includes being displayed above a BottomNavigationBar and a FloatingActionButton.

Answer 4

正在尝试设置：行为：SnackBarBehavior.floating 可能有效

SnackBar(behavior: SnackBarBehavior.floating, content: Padding(child: Text(message),
          padding: EdgeInsets.only(bottom: 30),)));

Answer 5

您可以用钥匙将小吃店连接到脚手架。

例如：-

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

void showSnackBar(String text) {
    _scaffoldKey.currentState.showSnackBar(SnackBar(
      content: Text(
        text,
        textAlign: TextAlign.center,
      ),
      duration: Duration(seconds: 0, milliseconds: 750),
    ));
  }

然后将密钥添加到脚手架：

Scaffold(
      key: _scaffoldKey,
      ...
);

您现在可以从任何地方调用此函数。

如何设置 snackbar 和浮动操作按钮之间的距离？

How do I set the distance between snackbar and floating action button?

floating-action-button

snackbar

flutter