33Flutter仿京东商城项目登录注册相关页面布局

我就是我 2023-08-17 15:59 113阅读 0赞

加群***452892873***下载对应33课文件，运行方法，建好项目，直接替换lib目录

以下列出的是本课涉及的文件。

User.dart

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.dart';
    
    class UserPage extends StatefulWidget {
      UserPage({Key key}) : super(key: key);
    
      _UserPageState createState() => _UserPageState();
    }
    
    class _UserPageState extends State<UserPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("用户中心"),
          ),
          body: ListView(
            children: <Widget>[
              Container(
                height: ScreenAdapter.height(220),
                width: double.infinity,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('images/user_bg.jpg'),
                        fit: BoxFit.cover)),
                child: Row(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                      child: ClipOval(
                        child: Image.asset(
                          'images/user.png',
                          fit: BoxFit.cover,
                          width: ScreenAdapter.width(100),
                          height: ScreenAdapter.width(100),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () {
                          Navigator.pushNamed(context, '/login');
                        },
                        child: Text('登录/注册', style: TextStyle(color: Colors.white)),
                      ),
                    ),
    
                    // Expanded(
                    //   flex: 1,
                    //   child: Column(
                    //     mainAxisAlignment: MainAxisAlignment.center,
                    //     crossAxisAlignment: CrossAxisAlignment.start,
                    //     children: <Widget>[
                    //       Text("用户名:123456789",
                    //           style: TextStyle(
                    //               color: Colors.white,
                    //               fontSize: ScreenAdapter.size(32))),
                    //       Text("普通会员",
                    //           style: TextStyle(
                    //               color: Colors.white,
                    //               fontSize: ScreenAdapter.size(32)))
                    //     ],
                    //   ),
                    // )
                  ],
                ),
              ),
              ListTile(
                  leading: Icon(Icons.home, color: Colors.red), title: Text('首页')),
              Divider(),
              ListTile(leading: Icon(Icons.home), title: Text('首页')),
              ListTile(leading: Icon(Icons.home), title: Text('首页')),
              ListTile(leading: Icon(Icons.home), title: Text('首页'))
            ],
          ),
        );
      }
    }

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.dart';
    import 'package:flutter_jdshop/widget/JdButton.dart';
    import '../widget/JdText.dart';
    import '../widget/JdText.dart';
    
    class LoginPage extends StatefulWidget {
      LoginPage({Key key}) : super(key: key);
    
      _LoginPageState createState() => _LoginPageState();
    }
    
    class _LoginPageState extends State<LoginPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            leading: IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            title: Text('登录页面'),
            actions: <Widget>[
              FlatButton(
                child: Text('客服'),
                onPressed: () {},
              )
            ],
          ),
          body: Container(
            padding: EdgeInsets.all(ScreenAdapter.width(20)),
            child: ListView(
              children: <Widget>[
                Center(
                  child: Container(
                    margin: EdgeInsets.only(top: 30),
                    height: ScreenAdapter.width(160),
                    width: ScreenAdapter.width(160),
                    // child: Image.asset('images/login.png'),
                    child: Image.network(
                        'https://www.iting.com/images/flutter/list5.jpg'),
                  ),
                ),
                JdText(
                  text: "请输入用户名",
                  onChanged: (value) {
                    print(value);
                  },
                ),
                SizedBox(height: 20),
                JdText(
                  text: "请输入密码",
                  password: true,
                  onChanged: (value) {
                    print(value);
                  },
                ),
                SizedBox(height: 20),
                Container(
                  padding: EdgeInsets.all(ScreenAdapter.width(20)),
                  child: Stack(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Text("忘记密码"),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child:InkWell(
                          onTap: (){
                            Navigator.pushNamed(context,'/RegisterFirst');
                          },
                          child: Text("新用户注册"),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(height: 20),
                JdButton(
                  text: "登录",
                  color: Colors.red,
                )
              ],
            ),
          ),
        );
      }
    }

RegisterFirst.dart

RegisterSecond.dart

RegisterThird.dart

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/widget/JdButton.dart';
    import 'package:flutter_jdshop/widget/JdText.dart';
    
    class RegisterThirdPage extends StatefulWidget {
      RegisterThirdPage({Key key}) : super(key: key);
    
      _RegisterThirdPageState createState() => _RegisterThirdPageState();
    }
    
    class _RegisterThirdPageState extends State<RegisterThirdPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('用户注册-第三步'),
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: ListView(
              children: <Widget>[
                SizedBox(height: 10),
                JdText(
                  text: "请输入密码",
                  password: true,
                  onChanged: (value) {
                    print(value);
                  },
                ),
                SizedBox(height: 10),
                JdText(
                  text: "请输入确认密码",
                  password: true,
                  onChanged: (value) {
                    print(value);
                  },
                ),
                SizedBox(height: 10),
                JdButton(
                  text: "确认",
                  color: Colors.red,
                  cb: () {},
                )
              ],
            ),
          ),
        );
      }
    }
    //

JdText.dart

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.dart';
    class JdText extends StatelessWidget {
      final String text;
      final bool password;
      final Object onChanged;
      JdText({Key key,this.text="输入内容",this.password=false,this.onChanged=null}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: TextField(
            obscureText: this.password,
            decoration: InputDecoration(
              hintText: this.text,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: BorderSide.none
              )
            ),
            onChanged:this.onChanged,
          ),
          height: ScreenAdapter.height(68),
          decoration: BoxDecoration(
            // color: Color.fromRGBO(233,233,233,0.8),
            // borderRadius: BorderRadius.circular(30)
            border: Border(
              bottom:BorderSide(
                width: 1,
                color: Colors.black12
              )
            )
          ),
          
        );
      }
    }

JdButton.dart

import 'package:flutter/material.dart';
    import '../services/ScreenAdapter.dart';
    
    class JdButton extends StatelessWidget {
    
      final Color color;
      final String text;
      final Object cb;
      JdButton({Key key,this.color=Colors.black,this.text="按钮",this.cb=null}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        ScreenAdapter.init(context);
        return InkWell(
          onTap: this.cb,
          child: Container(
            margin: EdgeInsets.all(5),
            padding: EdgeInsets.all(5),
            height: ScreenAdapter.height(68),
            width: double.infinity,
            decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(10)),
            child: Center(
              child: Text(
                "${text}",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        );
      }
    }

router.dart

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/pages/Login.dart';
    import 'package:flutter_jdshop/pages/RegisterFirst.dart';
    import 'package:flutter_jdshop/pages/RegisterSecond.dart';
    import 'package:flutter_jdshop/pages/RegisterThird.dart';
    import 'package:flutter_jdshop/pages/tabs/Cart.dart';
    import '../pages/tabs/Tabs.dart';
    
    import '../pages/Search.dart';
    
    import '../pages/ProductList.dart';
    
    import '../pages/ProductContent.dart';
    
    //配置路由
    final routes = {
      '/': (context) => Tabs(),
      '/login': (context) => LoginPage(),
      '/RegisterFirst': (context) =>RegisterFirstPage(),
      '/RegisterSecond': (context) =>RegisterSecondPage(),
      '/RegisterThird': (context) =>RegisterThirdPage(),
      '/search': (context) => SearchPage(),
      '/cart': (context) => CartPage(),
      '/productList': (context,{arguments}) => ProductListPage(arguments:arguments),
      '/productContent': (context,{arguments}) => ProductContentPage(arguments:arguments),
    };
    
    //固定写法
    var onGenerateRoute = (RouteSettings settings) {
    // 统一处理
      final String name = settings.name;
      final Function pageContentBuilder = routes[name];
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        } else {
          final Route route =
              MaterialPageRoute(builder: (context) => pageContentBuilder(context));
          return route;
        }
      }
    };

pubspec.yaml

转载于:https://www.cnblogs.com/yiweiyihang/p/11531350.html