Flutter布局锦囊---完善信息页

2019年5月8日 166次阅读 来源: 何小有

设计给的效果如下：

《Flutter布局锦囊---完善信息页》 UI布局图

拿到设计后，先把整体拆分成几个部分：

  1. “用户昵称输入”，获取用户输入的昵称信息。
  2. “用户头像选取”，获取用户选取作为头像的图片。
  3. “用户性别选择”，获取用户选择的性别信息。
  4. “提交按钮”，提交用户的信息。

然后就可以开始进行编码了。

第1步：绘制组件树

《Flutter布局锦囊---完善信息页》 完善信息页的组件树

第2步：实现“用户昵称输入”

先通过脚手架（Scaffold）组件、安全区（SafeArea）组件和列表视图（ListView）组件搭一个适配现在各种奇形怪状屏幕的、可滚动的“脚手架”，方便后面填充组件。

import 'package:flutter/material.dart';
import 'widgets/complex_navigation.dart';
import 'widgets/upload_avatar.dart';
import 'widgets/gender_selection.dart';
import '../common/doodle_button.dart';

/// 自定义的注册页面组件。
class RegisteredPage extends StatefulWidget {
  @override
  _RegisteredPageState createState() => _RegisteredPageState();
}

/// 与自定义的注册页面组件关联的状态子类。
class _RegisteredPageState extends State<RegisteredPage> {
  /// 昵称文本字段的控制器。
  final _nameController = TextEditingController();
  /// 当前选择的性别值。
  int _genderSelect = 0;
  /// 当前昵称文本字段的状态。
  bool _userInput = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            // TODO: 第2步：实现“用户昵称输入”
            // TODO: 第3步：实现“用户头像选取”
            // TODO: 第4步：实现“用户性别选择”
            // TODO: 第5步：实现“提交按钮”
          ],
        ),
      ),
    );
  }
}

下面使用的自定义的复合导航（ComplexNavigation）组件是《Flutter布局锦囊—带输入字段的应用栏》中实现的一个带有返回按钮、主题图片和文本输入框的自定义操作区域。

            // TODO: 第2步：实现“用户昵称输入”
            ComplexNavigation(
              textEditingController: _nameController,
              nonEmptyCallback: () {
                _userInput = true;
                setState(() {});
              },
              emptyCallback: () {
                _userInput = false;
                setState(() {});
              },
            ),

第3步：实现“用户头像选取”

下面使用的自定义的上传头像（UploadAvatar）组件是《Flutter布局锦囊—有背景图的头像选择》中的一个借助Flutter团队开发的图片选择器（image_picker）插件实现的图片选取器。

            // TODO: 第3步：实现“用户头像选取”
            SizedBox(height: 42.0),
            UploadAvatar(),
            SizedBox(height: 36.0),

第4步：实现“用户性别选择”

下面使用的自定义的性别选择（GenderSelection）组件是《Flutter布局锦囊—男女性别单选》中实现的一个图文并貌的性能选择区域。

            // TODO: 第4步：实现“用户性别选择”
            GenderSelection(
              selectCallback: (genderSelect){
                _genderSelect = genderSelect;
                setState(() {});
              },
            ),
            SizedBox(height: 48.0),

第5步：实现“提交按钮”

下面使用的自定义的涂鸦按钮（DoodleButton）组件是《Flutter布局锦囊—涂鸦风格按钮》中实现的一个涂鸦画风的自定义样式的按钮。

            // TODO: 第5步：实现“提交按钮”
            Container(
              padding: EdgeInsets.symmetric(horizontal: 40.0),
              child: DoodleButton(
                promptText: '好了',
                activation: _genderSelect != 0 && _userInput,
                onTapCallback: (){
                  print('注册成功！');
                },
              ),
            ),

第6步：还原效果

《Flutter布局锦囊---完善信息页》 完善信息页的还原效果

    原文作者：何小有
    原文地址: https://www.jianshu.com/p/63da1dc5de55
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞