一、前言
前面了解了Flutter的适配原理级及适配方案,接下来我们进行一个实战,开发一个登录界面,效果图如下:
二、代码实践
2.1 LoginPage
这里LoginPage使用StatefulWidget来实现:
class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.dp),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
),
),
);
}
}
2.2 为Column添加内容
欢迎登录和头部有一定的距离,这里使用SizedBox在占位
children: [