最近刚开始学习Flutter，并且要手动做项目了。。。
这里最基本的就不介绍了，环境搭建，新建项目啥的。。。
第一个肯定是登录页面，刚开始编写出来没问题，界面大概长这样：
image.png
这里大概遇到了一些小坑，比如遮挡问题 网上一致做法是外边包一个：
SingleChildScrollView
。。代码先不上了，最后会有完整的代码。
但是后来产品该需求了，App启动后不是登录页面而是主页面，然后在里边点击某个功能来判断是否登录，如果没有登录就跳转到登录，界面也改进了下，大概这样的：
image.png
代码如下（注意这是界面部分代码，逻辑啥的都么写）：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
buildTitle(),
SizedBox(height: 50.0),
buildPhoneNumber(),
buildUserProfile(),
buildLoginButton(),
SizedBox(height: 120.0,),
buildWechatLogin(),
],
),
)
);
buildTitle(){
return Padding(
padding: EdgeInsets.fromLTRB(15.0,50.0,30.0,15.0),
child: Text(
"请输入您的手机号",
style: TextStyle(
color: Colors.black,
fontSize: 28.0
),
),
);
}
buildPhoneNumber(){
return Padding(
padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 15.0),
child: Stack(
alignment: Alignment(1.0, 1.0),
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text("+86",style: TextStyle(fontSize: 18.0,color: Color(0xFF7D7D7D))),
SizedBox(width: 20.0,),
Expanded(
child: TextField(
controller: _phoneController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: "请输入手机号"
),
style: TextStyle(fontSize: 24.0),
onChanged: _onPhoneNumChange,
)
)
]),
IconButton(
icon: Icon(Icons.clear,color: Colors.black45),
onPressed: (){
_phoneController.clear();
},
)
],
),
);
}
buildUserProfile(){
return Row(
children: <Widget>[
Radio(value: null, groupValue: null, onChanged: null),
Text("登录既已同意",style: TextStyle(color: Color(0xFFBAB9B9)),),
Container(
child: GestureDetector(
child: Text("《用户注册协议》",style: TextStyle(color:Color(0xFFEA8408))),
onTap: _doUserProfile,
),
)
],
);
}
buildLoginButton(){
return Container(
alignment: Alignment.center,
child: Container(
width: 340.0,
child: Card(
color: Color(0xfff2f2f2),
// elevation: 16.0,
child: FlatButton(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text(
'下一步',
style: TextStyle(
color: Color(0xffd7d7d7), fontSize: 16.0),
),
),
onPressed: () {
_doLogin();
},
),
),
),
);
}
buildWechatLogin(){
return Container(
alignment: Alignment.bottomCenter,
child: Container(
child: Column(
children: <Widget>[
Text("第三方登录",style: TextStyle(color: Color(0xff949494)),),
FlatButton(
onPressed: _wechatLogin,
child: Image(
image: AssetImage("assets/images/wechat.png"),
width: 70.0,
height: 70.0,
fit: BoxFit.contain,
)
)
],
),
)
);
}
嗯，界面撸出来了。。。。。。看上去也没啥问题， 想着舒服了吧，
但是，但是，但是 碰到一个大问题，当我点击电话输入框时，我的界面整体往上移动了。。。而且其他控件被遮挡了。。。？？？？
image.png
一万个CNM飘过。。这啥情况啊，我直接启动登录页是没问题的啊，但是在里边怎么会有问题呢？？？
网上各种搜，都没有解决，
自己硬着头皮看代码：发现了如下的问题
在APP启动的时候是这样的main.dart 文件：
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Maxima Driver',
theme: ThemeData(
primaryColor: Color(ThemeColor),
backgroundColor: Color(0xFFEFEFEF),
accentColor: Color(0xFF888888),
textTheme: TextTheme(
body1: TextStyle(color: Color(0xFF888888),fontSize: 16.0)
),
iconTheme: IconThemeData(
color: Color(ThemeColor),
size: 35.0
)
),
home: new Scaffold(
body: LoginPage(),
),
注意home 部分，我这里包了一个Scaffold ，但是 我LoginPage里 也有一个Scaffod，
这里就很奇怪了，抱着怀疑的心里，包含肯定会有问题，然后我去掉了，改成这样的：
home: LoginPage(),
把 Scaffod这个东西去掉。
直接运行： 哇 竟然成功了。。。。。。
image.png
希望能够帮到大家。。。。。。。。
网友评论