我正在嘗試制作一個像這樣有小吃店的用戶界面 -
但我得到了用戶界面 -
如何減少小吃店的寬度，并將其放置在螢屏底部上方？
這是代碼 -
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
width: MediaQuery.of(context).size.width*0.46,
elevation: 5.0,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(35.0)),
content: Wrap(
children: [
Container(
//height: 20,
child: Center(
child: Text(
'Please enter valid email',
),
),
),
],
),
)
);
我試著給小吃店留出余量 -
SnackBar(
width: MediaQuery.of(context).size.width*0.46,
elevation: 5.0,
margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
但是，它給了我一個例外，即超出寬度或邊距，應該為空 -
Failed assertion: line 210 pos 10: 'width == null || margin == null': Width and margin can not be used together
uj5u.com熱心網友回復：
您可以輕松使用此包：鏈接
這個包已經準備好用于你想要的。
uj5u.com熱心網友回復：
更新
設定邊距SnackBar并嘗試使用 ScaffoldMessenger而不是SnackBar因為前一個被褻瀆。并且還自定義左或右填充
Widget build(BuildContext context) {
double padding = MediaQuery.of(context).size.width * 0.54 -
MediaQuery.of(context).size.width * 0.46; // here you customize your padding
return InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
elevation: 5.0,
content:
child: Wrap(
children: const [
Center(
child: Text(
'Please enter valid email',
),
),
],
),
margin: EdgeInsets.only(bottom: 120, left: padding, right: padding), // update margin as you need
behavior: SnackBarBehavior.floating,
));
},
child: const Text("Show snackbar"),
);
}
uj5u.com熱心網友回復：
按照檔案中的規定，如果指定了寬度，則不能使用邊距。
將水平邊距定義為 27%MediaQuery.of(context).size.width似乎可以實作您的目標：
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
margin: EdgeInsets.symmetric(
vertical: 20.0,
horizontal: MediaQuery.of(context).size.width * 0.27,
),
elevation: 5.0,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(35.0),
),
content: Wrap(
children: const [
Center(
child: Text(
'Please enter valid email',
),
),
],
),
),
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/402052.html