Flutter填写用户名和密码表单实例

百度已收录   阅读次数: 115
2021-07-1420:24:08 发表评论
摘要

在flutter设计程序过程中,用户的登录页面自然是必不可少,伯衡君今天就学习了这个的部署设计,发现也是非常简单,以一个最基本的样式来讲解,更华丽的都可以从基础改变……

Flutter填写用户名和密码表单实例

开篇寄语

在flutter设计程序过程中,用户的登录页面自然是必不可少,伯衡君今天就学习了这个的部署设计,发现也是非常简单,以一个最基本的样式来讲解,更华丽的都可以从基础改变。

前情提要

内容详情

以下内容大多是更改lib下的main.dart文件内容,删掉里面的内容,复制粘贴代码,开启调试就可以出现了。、

试举例如下:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isObscure = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const TextField(
                decoration: InputDecoration(
                    labelText: 'username',
                    suffixIcon: Icon(Icons.verified_sharp)),
              ),
              TextField(
                obscureText: _isObscure,
                decoration: InputDecoration(
                    labelText: 'password',
                    suffixIcon: IconButton(
                        icon: Icon(_isObscure
                            ? Icons.visibility
                            : Icons.visibility_off),
                        onPressed: () {
                          setState(() {
                            _isObscure = !_isObscure;
                          });
                        })),
              ),
              Container(height: 20),
              ElevatedButton(onPressed: () {}, child: const Text('Login'))
            ]),
      ),
    );
  }
}

生成效果如下图所示:

Flutter填写用户名和密码表单实例
分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: