如何在颤动中更改小吃店的填充

Posted 2023-02-23

【中文标题】如何在颤动中更改小吃店的填充

【英文标题】：How to change the padding of the snackbar in flutter

【发布时间】：2020-04-06 05:44:24

【问题描述】：

如何从底部和左侧/右侧为小吃店设置空间？

【参考方案1】：

您可以使用Container 包装小吃栏的内容（文本），并根据您的需要提供margin 或padding。下面的工作代码示例：

final snackBar = SnackBar(
            content: Container(
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.only(left: 100, right: 50, bottom: 5),
              child: Text('Yay! A SnackBar!'),
            )

【讨论】：

我正在尝试为边缘提供边距和填充，而不是为小吃店的内容提供边距和填充。

【参考方案2】：

你可以试试这个：

final snackBar = SnackBar(
    elevation: 6.0,
    behavior: SnackBarBehavior.floating,
    content: Text(
        "Snack bar test",
        style: TextStyle(color: Colors.white),
    ),
);

这里的主要变化是 SnackBar 类中的 behavior 属性的存在，该属性将 SnackBarHehavior 属性作为值。

【讨论】：

要使用 SnackBarBehavior.floating 参数，页面必须有底部导航栏。否则浮动将不起作用。

【参考方案3】：

将行为属性作为 SnackBarBehavior.floating 添加到 Snackbar。请参阅下面的代码。

ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Error from Stripe: $e.error.localizedMessage'),
        behavior: SnackBarBehavior.floating, // this will add margin to the snackbar
      ),
    )

【参考方案4】：

试试这个：临时解决方案：

Scaffold.of(context).showSnackBar(
    SnackBar(
       backgroundColor: Colors.transparent,
       content: Container(
         width: MediaQuery.of(context).size.width * 9,
         height: 30.0,
         color: Colors.red,
         padding: EdgeInsets.only(left: 100, right: 50, bottom: 5),
         child: Center(child:Text('Yay! A SnackBar!')),
      )
     )
   );

或者

Scaffold.of(context).showSnackBar(
   SnackBar(
      backgroundColor: Colors.transparent,
      content: Container(
      width: MediaQuery.of(context).size.width * 9,
      height: 30.0,
      decoration: BoxDecoration(
         color: Colors.red,
         borderRadius: BorderRadius.circular(10.0)
      ),
      padding: EdgeInsets.only(left: 100, right: 50, bottom: 5),
      child: Center(
         child:Text('Yay! A SnackBar!')
         ),
       )
      )
   );

【讨论】：

不幸的是，我没有得到这样的好外观。此外，该形状不适用。 (形状: RoundedRectangleBorder (borderRadius: BorderRadius.all (Radius.circular (10))))。

@katre 你想达到什么目的？对于圆形容器，您只需添加 "borderRadius: BorderRadius.circular(10.0)" 。

【参考方案5】：

试试flushbar, 使用margin 属性给空间。

Flushbar(
  message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  icon: Icon(
    Icons.info_outline,
    size: 28.0,
    color: Colors.blue[300],
    ),
  duration: Duration(seconds: 3),
  leftBarIndicatorColor: Colors.blue[300],
  margin: EdgeInsets.all(8),
  borderRadius: 8,
)..show(context);

输出：

【讨论】：

Flushbar，在我反复删除和撤消的列表中导致图像刷新错误。因此不想使用flushbar。

【参考方案6】：

小吃店有点难以改变。我发现了一个非常易于使用的包，您可以随意自定义它，这将使您拥有与具有所有自定义属性的小吃店相同的外观。

包名为FlushBar

此软件包适用于 ios 和 android。我个人使用过，效果很好。此外，您可以在不使用脚手架的情况下使用 FlushBar，而与小吃店一样，您必须能够引用脚手架才能显示小吃店。像这样，

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

// Find the Scaffold in the widget tree and use it to show a SnackBar.
Scaffold.of(context).showSnackBar(snackBar);

这是他们提供的用于使用冲洗条的 sn-p。

class YourAwesomeApp extends StatelessWidget 



@override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'YourAwesomeApp',
      home: Scaffold(
        Container(
          child: Center(
            child: MaterialButton(
              onPressed: ()
                Flushbar(
                  title:  "Hey Ninja",
                  message:  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
                  duration:  Duration(seconds: 3),              
                )..show(context);
              ,
            ),
          ),
        ),
      ),
    );
  

【讨论】：

我知道flushbar。我使用的结构中的flushbar引起了不同的问题。我不想用它。