(2)Flutter记录之登陆页面

相比于启动页面，登录页面稍显复杂。涉及的问题有：
1、页面跳转路由功能
2、启动页添加延时
3、样式布局

路由功能

在写页面跳转的时候，发现启动页做的不是很好，还可以更优雅，所以重构了一下。保留main.dart文件，设置launch页面为启动页，并在main.dart添加路由。

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: new Launch(),//Launch设置为启动页
      routes: <String,WidgetBuilder>{//routes里面添加路由页面
        "/login":(context)=> new Login(),
      },
    );
  }

flutter页面跳转由Route和 Navigator构成。

延时

flutter $\color{red}{延时}$ 并没有java那么简单。

Future.delayed

当然也可以用timer，并且timer还不会引入隐藏问题。即执行Future.delayed之前关闭页面就会报错。

 Timer t = Timer(Duration(seconds: myDuration), () {
  });

launch.dart代码

class Launch extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LaunchState();
  }
}

class _LaunchState extends State<Launch>{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: new Scaffold(
        backgroundColor: Colors.cyan,
        body: new Center(
          child: new Image(image:AssetImage("images/ic_app.jpg"),width: 100,height: 100,),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    onDelayed();
  }

  void onDelayed(){
    var duration = new Duration(seconds: 2);
    new Future.delayed(duration,onLogin);
  }

  void onLogin(){
    Navigator.of(context).pushReplacementNamed("/login");
  }
}

样式布局

页面主要分2块appBar以及body。其中appBar主要包括标题栏，body主要是除appBar之外的。
appBar中设置返回键需要用

leading:

如appBar样式

 appBar: new AppBar(
        leading: new Image(
          image: AssetImage("images/back.png"),
          width: 25,
          height: 25,
        ),
         centerTitle: true,
         title: new Text("登陆"),
       ),

布局又需要常用到垂直布局Column和水平布局Row

  child: Column(//竖样式
           children: <Widget>[]
  )

边距

 const SizedBox(height:double)
 const SizedBox(width:double)
 const SizedBox(width:double,height: double)

输入框

 TextField(
                autofocus: true,//是否自动获取焦点
                decoration: InputDecoration(//TextField的外观显示
                  hintText: "请输入手机号",
                  prefixIcon: Icon(Icons.phone)
                ),
             ),

按钮

 RaisedButton(
               color: Colors.blue,//背景颜色
               textColor: Colors.white,//按钮文字颜色
               onPressed: (){},//点击事件
               child: Container(
                child: new Center(//文字居中
                  child: new Text(
                    '确认',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
                 width: 100,
               ),
             )

小记：flutter是香，但还是需要不断的去摸索总结，离开xml布局直接撸布局还是稍有不习惯，最新的Jetpack Compse也在寻找手动撸布局，希望共勉！

最后编辑于：2019.11.19 10:53:50