英文:
How to give a ModalBottomSheet a margin?
问题
如果我给ModalBottomSheet添加水平边距，左右边距会不同。
为什么左右边距会有不同的效果？
以下是我的代码。
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (context) {
return Container(
height: 200,
color: Colors.black,
// 我使用了水平属性来应用相同的左右边距，
// 但当我查看屏幕时，
// 左右边距是不同的。
margin: EdgeInsets.symmetric(horizontal: 15),
child: Text('文本'),
);
},
);
},
child: Text('显示底部模态框'),
),
),
);
}
}
注意：上述代码是一个Flutter代码示例，用于显示底部模态框，并涉及边距问题。
英文:
If I give the ModalBottomSheet a horizontal margin, the margin on the left and right is different.
Why are the right and left margins applied differently?
Here is my code.
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (context) {
return Container(
height: 200,
color: Colors.black,
// I applied the same left and right margins
// with the horizontal property,
// but when I look at the screen,
// the left and right margins are different.
margin: EdgeInsets.symmetric(horizontal: 15),
child: Text('text'),
);
},
);
},
child: Text('show bottom modal'),
),
),
);
}
}
答案1
得分: 1
你可以使用EdgeInsets来实现一致的左右边距：
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (context) {
return Container(
height: 200,
color: Colors.black,
margin: EdgeInsets.only(left: 15, right: 15), //添加这一行
child: Text('文本'),
);
},
);
},
child: Text('显示底部模态框'),
),
),
);
}
输出:
英文:
You can use EdgeInsets to achieve consistent left and right margins:
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (context) {
return Container(
height: 200,
color: Colors.black,
margin: EdgeInsets.only(left: 15, right: 15), //add this line
child: Text('text'),
);
},
);
},
child: Text('show bottom modal'),
),
),
);
}
Output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论