flutter 登陆页带历史账号(仿qq)

网上找啊找,找不到想要的带历史账号的登陆界面,如果你们有看到,一定要让我借鉴一下。
在这里插入图片描述

没有任何样式的demo:
在这里插入图片描述
在这里插入图片描述

import 'package:flutter/material.dart';

class LoginHomePage extends StatefulWidget {
  @override
  _LoginHomePageState createState() {
    return new _LoginHomePageState();
  }
}

class _LoginHomePageState extends State<LoginHomePage> {
  var username;
  var password;
  bool passwordVisible = true;
  List accountList = [
    {"username": "aaaa", "password": "123456"},
    {"username": "bbbb", "password": "123456"}
  ];
  bool _expand = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InkWell(
        child: Container(
          margin: EdgeInsets.all(10),
          width: double.infinity,
          child: Column(
            children: [
              Container(
                  height: 70,
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: Row(
                    children: [
                      Expanded(
                        flex: 9,
                        child: TextField(
                          onTap: () {
                            setState(() {
                              _expand = false;
                            });
                          },
                          autofocus: false,
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                            labelText: "用户名",
                            hintText: "请输入用户名",
                            icon: Icon(Icons.person),
                          ),
                          onChanged: (v) {
                            username = v;
                          },
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: IconButton(
                          onPressed: () {
                            if (accountList.length > 0) {
                              setState(() {
                                _expand = !_expand;
                              });
                              FocusScope.of(context).unfocus();
                            }
                          },
                          icon: _expand
                              ? Icon(
                                  Icons.arrow_drop_down,
                                )
                              : Icon(
                                  Icons.arrow_drop_up,
                                ),
                        ),
                      )
                    ],
                  )),
              if (_expand == true)
                Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(25.0)),
                    ),
                    height: accountList.length < 4
                        ? 70.0 * accountList.length
                        : 180,
                    child: Scrollbar(
                        radius: Radius.circular(10),
                        thickness: 10,
                        child: ListView.builder(
                          itemCount: accountList.length,
                          itemBuilder: historyAccounts,
                        ))),
              if (_expand == false)
                Container(
                    height: 70,
                    margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                    child: Row(
                      children: [
                        Expanded(
                          flex: 9,
                          child: TextField(
                            keyboardType: TextInputType.text,
                            obscureText: passwordVisible, //密码输入类型
                            decoration: InputDecoration(
                              labelText: "密码",
                              hintText: "请输入密码",
                              icon: Icon(Icons.lock),
                            ),
                            onChanged: (v) {
                              password = v;
                            },
                          ),
                        ),
                        Expanded(
                            flex: 1,
                            child: IconButton(
                              icon: Icon(
                                passwordVisible
                                    ? Icons.visibility_off
                                    : Icons.visibility,
                                color: Theme.of(context).primaryColorDark,
                              ),
                              onPressed: () {
                                setState(() {
                                  passwordVisible = !passwordVisible;
                                });
                              },
                            ))
                      ],
                    )),
              if (_expand == false)
                Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: FloatingActionButton(
                          backgroundColor: Colors.blue,
                          foregroundColor: Colors.white,
                          child: Text('登录', style: TextStyle(fontSize: 17)),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(80.0) //设置圆角
                              ),
                          onPressed: () {
                            signIn(username, password);
                          },
                        ),
                      ),
                    ],
                  ),
                ),
            ],
          ),
        ),
        onTap: () {
          setState(() {
            _expand = false;
          });
          //关闭键盘
          FocusScope.of(context).unfocus();
        },
      ),
    );
  }

  Widget historyAccounts(context, index) {
    return Column(
      children: [
        ListTile(
          onTap: () {
            setState(() {
              _expand = false;
            });
            signIn(
                accountList[index]['username'], accountList[index]['password']);
          },
          dense: true,
          title: Text(accountList[index]['username']),
        ),
      ],
    );
  }

  signIn(username, password) async {}
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值