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

Posted 2023-02-23

【中文标题】如何设置小吃栏和浮动操作按钮之间的距离？

【英文标题】：How do I set the distance between snackbar and floating action button?

【发布时间】：2020-02-09 11:20:15

【问题描述】：

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

【参考方案1】：

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

但是如果你想调整它，你可以不使用 Scaffold 中的 FAB，而是将 body 设置为 Stack，最新的层是你的 FAB 并将它包裹在 AnimatedPositioned 中，这样你就可以对其进行动画处理与底部的适当距离。

【参考方案2】：

你试过了吗

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

【参考方案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 这种行为会导致 SnackBar 显示在 Scaffold 中的其他小部件上方。这包括成为 显示在 BottomNavigationBar 和 FloatingActionButton 上方。

【讨论】：

这不是解决距离的办法。当snackbar 可见时，snackbar 和FAB 之间的距离打开到FAB 的第一个填充值。例如，第一个 FAB 填充高度值为 50.0。当小吃店可见时，我想保留 50 个。把它放在同一个地方。

我将 FAB 从脚手架的 FAB 属性移动到脚手架主体属性中的 Stack 小部件。我可以这样使用它。

我误解了你的问题。我更新了我的答案。

我之前尝试过，但是当小吃店向上滑动时，导致 FAB 跳跃。不幸的是，它似乎并不好。

【参考方案4】：

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

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

【参考方案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),
    ));
  

然后在脚手架上添加key：

Scaffold(
      key: _scaffoldKey,
      ...
);

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