使用flutter 3.0制作一个登录界面,包含一个标题,一个用户名输入框,一个密码输入框,一个登录按钮,这些控件相对屏幕垂直居中,并且随着屏幕大小自动改变大小
时间: 2024-05-11 11:20:24 浏览: 89
Flutter_1:第一个扑扑项目
您可以使用Flutter中的Material Design来创建一个漂亮的登录界面。以下是一个简单的示例:
```dart
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'登录',
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 32.0),
TextFormField(
decoration: InputDecoration(
labelText: '用户名',
border: OutlineInputBorder(),
),
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: '密码',
border: OutlineInputBorder(),
),
obscureText: true,
),
SizedBox(height: 32.0),
ElevatedButton(
onPressed: () {},
child: Text('登录'),
),
],
),
),
);
}
}
```
在这个例子中,我们使用`Scaffold`来创建一个页面框架。在`Scaffold`的`body`中,我们使用`Padding`来添加内边距,并将`Column`放在其中。`Column`是一个垂直布局的小部件,我们使用`MainAxisAlignment.center`来使其相对于屏幕垂直居中,使用`CrossAxisAlignment.center`来使其水平居中。
在`Column`中,我们添加了一个`Text`部件作为标题,并使用`SizedBox`来添加空间。然后,我们添加了两个`TextFormField`,分别用于用户名和密码输入。`TextFormField`是一个有状态的部件,用于接收用户输入。我们使用`SizedBox`来添加空间,并在密码输入框中使用`obscureText`属性来隐藏文本。
最后,我们添加了一个`ElevatedButton`来完成登录操作。`ElevatedButton`是一个漂亮的Material Design按钮,可以通过调用`onPressed`回调来处理点击事件。
通过使用这个简单的布局,我们可以创建一个美观且响应式的登录界面。
阅读全文