英文:
How do I add a padding in the Scaffold without using SafeArea?
问题
如何在我的脚手架区域顶部添加响应式填充，这是我的脚手架区域的预览。我希望那里的背景是透明的或根据用户的手机主题进行调整。然而，我的出现重叠问题。
这是我的login_page的示例代码。
login_page.dart
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
TextWidget(
descriptionText: "Sign In!",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "Sign up with Google",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
);
}
}
英文:
How do I add a responsive padding at the top of my scaffold area,
Here is the preview of my Scaffold Area. I want the background there to be transparent or will adjust depending on the users phone theme. However mine is overlapping.
Here is the sample code of my login_page.
login_page.dart
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
TextWidget(
descriptionText: "Sign In!",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "Sign up with Google",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
);
}
}
答案1
得分: 1
将 Scaffold 包装在 SafeArea 中的替代方法是将 body 内的小部件与 SafeArea 包装在一起，这将产生相同的结果，但 UI 将根据主题做出响应。
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(child:Column(
children: [
TextWidget(
descriptionText: "登录！",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "使用 Google 登录",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
),);
}
}
英文:
Instead of wrapping the Scaffold with Safearea, wrap the widget inside the body with Safearea it gives you the same result but the UI will respond according to the theme.
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(child:Column(
children: [
TextWidget(
descriptionText: "Sign In!",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "Sign up with Google",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
),);
}
}
答案2
得分: 1
如果您不想使用SafeArea，但仍然想在屏幕顶部获取移动主题颜色，可以在列的开头放置一个高度等于顶部填充的SizedBox，像这样：
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(
height: MediaQuery.of(context).padding.top,
),
TextWidget(
descriptionText: "Sign In!",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "Sign up with Google",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
);
}
}
英文:
If you don't want to use SafeArea and still get the mobile theme color at the top of the screen
you can put a SizedBox in the starting of the column with a height of the top padding
like this:
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SizedBox(
height: MediaQuery.of(context).padding.top,
),
TextWidget(
descriptionText: "Sign In!",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "Sign up with Google",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
);
}
}
答案3
得分: 0
以下是翻译好的代码部分：
如果您想为安全区域添加颜色，可以像这样操作：
class _LoginPageState extends State<LoginPage> {
const TestScreen({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: SafeArea(
child: Scaffold(
body: Column(
children: [
SizedBox(
height: MediaQuery.of(context).padding.top,
),
TextWidget(
descriptionText: "Sign In!",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "Sign up with Google",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
),
),
);
}
}
希望这对您有所帮助。
英文:
If you want to give color to safe area, you can do it like this:
class _LoginPageState extends State<LoginPage> {
const TestScreen({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: SafeArea(
child: Scaffold(
body: Column(
children: [
SizedBox(
height: MediaQuery.of(context).padding.top,
),
TextWidget(
descriptionText: "Sign In!",
selectedFontColor: ColourPalette.primaryColor,
selectedFontWeight: FontWeight.normal,
selectedFontSize: 25),
SignInButton(
Buttons.google,
text: "Sign up with Google",
onPressed: () {
AuthServices().signInWithGoogle();
},
)
],
),
),
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论