Flutter布局练习

练习布局

  前段时间Flutter的文章超多，再加上以前的同事也在开始使用Flutter开发项目了，为了积累吹NB的资料，不得不了解一下，然后写个练习练练手。总体感觉还不错，虽然这类文章也很多。但毕竟是别人学习后的总结，跟自己敲一遍的理解是没法比的。看着永远比做着简单。（就像这段文字的缩进，之前我一直都用的全角空格。直到后来失效我才发现原来两个 就能实现这样的效果，当然还有别的方式）。
  废话不多说，撸个下面的界面就完事。

1.分析

  先来分析一个这个界面。真没啥好分析的，最简单的就是一个线性布局，然后往里扔子控件就行了。当然Flutter中也用类似的控件。这里我选用ListView，为啥不用Column。因为在这个布局中如果用Column包裹TextField，当弹出键盘时会出现遮挡，而ListView是可滚动的不会出现遮挡，这里我懒得深入研究，所以投机取巧了。所以这界面就可以这么弄了，使用ListView作为子控件的容器，让后一次往里放图片，输入框和按钮就能完成这个界面。

2.定义一个输入框

  为了体现出练习的作用，当然这是借口。因为我没找到如何修改TextField边框高度的方法，所以在TextField外又包了一层。功能很简单就是当TextField焦点发生改变的时候，改变一下边框的颜色。下面直接甩出代码：

///输入控件
class MyInputView extends StatefulWidget {
  final TextEditingController controller;
  final bool obscureText;
  final String hintText;
  final StatelessWidget icon;

  MyInputView(this.hintText, this.icon,
      this.controller, {this.obscureText = false});

  @override
  State<StatefulWidget> createState() {
    return MyInputViewState(
        hintText, icon, obscureText, controller);
  }
}

///输入控件的状态控制器
class MyInputViewState extends State<MyInputView> {
  final controller;
  final obscureText;
  final hintText;
  final icon;
  final focusNode = FocusNode();

  MyInputViewState(this.hintText, this.icon,
      this.obscureText, this.controller);

  ///边框的默认颜色
  var borderColor = Colors.grey;
  var inputBorder;

  @override
  Widget build(BuildContext context) {
    ///监听输入框的焦点变化
    focusNode.addListener(() {
      setState(() {
        borderColor = focusNode.hasFocus ? Theme
            .of(context)
            .primaryColor : Colors.grey;
      });
    });
    ///设置边框
    inputBorder = BoxDecoration(
        border: Border.all(
          color: borderColor,
          width: 1.5,
        ),
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)
        )
    );
    return Container(
      child: createInputView(
          hintText, icon, controller, obscureText),
    );
  }

  ///创建输入框
  createInputView(hint, icon, controller, obscureText) {
    return Container(
        padding: EdgeInsets.only(left: 10.0),
        child: TextField(
          focusNode: focusNode,
          controller: controller,
          decoration: InputDecoration(
              icon: icon,
              hintText: hint,
              border: InputBorder.none
          ),
          obscureText: obscureText,
        ),
        decoration: inputBorder
    );
  }
}

  为了证明这段代码还有点作用，我们来对比一下。先把控件放到界面中，然后运行看一下效果。

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatelessWidget {

  final titleStyle = TextStyle(fontSize: 20.0);
  final titleColor = Colors.blue;

  @override
  Widget build(BuildContext context) =>
      Scaffold(
          appBar: AppBar(
              title: Text('对比'),
              centerTitle: true
          ),
          body: Padding(
            padding: EdgeInsets.all(10.0), //设置边距
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center, //内容居中
                children: <Widget>[
                  createTitle('自定义的输入框'),
                  MyInputView(
                      '请输入姓名',
                      Icon(Icons.person),
                      TextEditingController()
                  ),
                  SizedBox(height: 10.0),
                  createTitle('默认的输入框'),
                  TextField(
                    decoration: InputDecoration(
                        hintText: '请输入姓名',
                        prefixIcon: Icon(Icons.person),
                        border: OutlineInputBorder()
                    ),
                  )
                ]
            ),
          )
      );

  createTitle(String title) =>
      Title(
          child: Text(title, style: titleStyle),
          color: titleColor);
}

  效果如下，自我感觉良好。

3.完成练习

  接下来就好整了，向布局中依次添加logo、输入框和按钮。然后稍微优化一下布局，比如让子控件之间有点距离啥的。这样一个简单的登录界面就完成了。代码很简单，就是有点迷之缩进看着有点恶心。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() =>
    runApp(MaterialApp(
      home: MyApp(),
    ));

///登录界面
class MyApp extends StatelessWidget {

  final userNameController = TextEditingController();
  final passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    const paddingValue = 30.0;
    var padding = Padding(
        padding: EdgeInsets.only(left: paddingValue, right: paddingValue),
        child: createColumn(context));
    return Scaffold(
        appBar: AppBar(
          title: Text('登录页'),
          centerTitle: true,
        ),
        body: padding
    );
  }

  ///设置界面中的视图效果
  createColumn(context) {
    return ListView(
      children: <Widget>[
        createColumnDriver(20.0),
        ///1、图片Logo
        Image.asset(
          'images/fish.png',
          color: Theme
              .of(context)
              .primaryColor,
          height: 160.0,
        ),
        createColumnDriver(20.0),
        ///2、用户输入框
        MyInputView(
            '请输入姓名', ImageIcon(AssetImage('images/userName_icon.png')),
            userNameController
        ),
        createColumnDriver(20.0),
        ///3、密码输入框
        MyInputView(
          '请输入密码', ImageIcon(AssetImage('images/password_icon.png')),
          passwordController,
          obscureText: true,
        ),
        createColumnDriver(30.0),
        ///4、登录按钮
        createLoginBtn(context)
      ],
    );
  }

  ///垂直间隔
  createColumnDriver(double height) => SizedBox(height: height);

  ///登录按钮
  createLoginBtn(context) {
    var loginBtn = RaisedButton(
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Text('登录',
          style: TextStyle(
              fontSize: 15.0,
              fontWeight: FontWeight.bold
          ),
        ),
      ),
      onPressed: () =>
          Fluttertoast.showToast(
              msg: '账号：${userNameController.text}\n密码：${passwordController.text}'),
      textColor: Colors.white,
      highlightColor: Theme
          .of(context)
          .primaryColorDark,
      color: Theme
          .of(context)
          .primaryColor,
      shape: StadiumBorder(),
    );
    return Row(children: <Widget>[
      Expanded(
        child: loginBtn,
      )
    ]);
  }
}

  在输入框中输入内容，然后点击按钮。弹出一个Toast显示我们输入的内容。

注意

  Fluttertoast这个是第三方库，多了不说反正很好用。