zoukankan      html  css  js  c++  java
  • flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下

    stack嵌套 一般情况下 stack是无法嵌套,出现stack嵌套,布局就会出乱 解决方式:就是第二个stack需要确定宽高
    appbar透明

    AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0,
    }
    

    container设置背景

    Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/icon_login_bg.png'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
    

    背景图在appBar之下

    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new Container(
            color: Colors.blue.shade200,
          ),
          new AppBar(
            title: new Text("App bar"),
            backgroundColor: Colors.transparent,
            elevation: 0.0,
          ),
          new Positioned(
            top: 80.0,
            left: 0.0,
            bottom: 0.0,
            right: 0.0,
            //here the body
            child: new Column(
              children: <Widget>[
                new Expanded(
                  child: Container(
                    color: Colors.grey,
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
    

    登陆页面

    import 'dart:async';
    import 'package:flutte_xms/util/func_util.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    class LoginPage extends StatefulWidget {
      @override
      _LoginPageState createState() => _LoginPageState();
    }
    
    class _LoginPageState extends State<LoginPage> {
      static const defaultText = '点击获取验证码';
      Timer countDownTimer;
      String vefifyCountText = defaultText;
    
      TextEditingController _mobileController;
      TextEditingController _verifyCodeController;
      Focus mobileFocus;
      @override
      Widget build(BuildContext context) {
        double screenWidth = FuntionUtil.screenwidth(context);
        double screenHeight = FuntionUtil.screenHeight(context);
        return Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.blue,
                image: DecorationImage(
                  image: AssetImage('assets/icon_login_bg.png'),
                  fit: BoxFit.cover,
                  repeat: ImageRepeat.noRepeat,
                ),
              ),
            ),
            Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0,
                iconTheme: IconThemeData(
                  color: Colors.white,
                ),
              ),
              body: GestureDetector(
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
                child: Container(
                  height: screenHeight,
                   screenWidth,
                  alignment: FractionalOffset(0.5, 0.7),
                  child: Padding(
                    padding: EdgeInsets.zero,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Stack(
                          alignment: FractionalOffset(0.5, 0.95),
                          children: <Widget>[
                            Container(
                              color: Colors.transparent,
                              padding: EdgeInsets.only(top: 15, bottom: 30),
                              child: Container(
                                margin: EdgeInsets.only(left: 20, right: 20),
    
                                // height: 200,
                                child: Card(
                                  child: Column(
                                    children: <Widget>[
                                      //请输入手机号
                                      Container(
                                        margin: EdgeInsets.only(
                                            top: 15, left: 12, right: 12),
                                        child: Row(
                                          children: <Widget>[
                                            Container(
                                              height: 54,
                                               30,
                                              alignment: Alignment.center,
                                              padding: EdgeInsets.only(
                                                  left: 0, right: 5),
                                              child: Image.asset(
                                                  'assets/icon_login_verifycode.png'),
                                            ),
                                            Expanded(
                                              child: Container(
                                                margin: EdgeInsets.only(right: 14),
                                                height: 54,
                                                alignment: Alignment.center,
                                                child: Theme(
                                                  data: Theme.of(context).copyWith(
                                                      splashColor:
                                                          Colors.transparent),
                                                  child: TextField(
                                                    controller: _mobileController,
                                                    keyboardType:
                                                        TextInputType.number,
                                                    textInputAction:
                                                        TextInputAction.next,
                                                    cursorColor: Colors.orange,
                                                    decoration: InputDecoration(
                                                      hintText: '请输入手机号',
                                                      border: InputBorder.none,
                                                    ),
                                                    inputFormatters: [
                                                      LengthLimitingTextInputFormatter(
                                                          11)
                                                    ],
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        decoration: BoxDecoration(
                                          border: Border(
                                            bottom: BorderSide(
                                                 2, color: Colors.orange),
                                          ),
                                        ),
                                      ),
                                      //请输入验证码
                                      Padding(
                                        padding: EdgeInsets.only(
                                            top: 15,
                                            bottom: 80,
                                            left: 12,
                                            right: 12),
                                        child: Container(
                                          child: Row(
                                            children: <Widget>[
                                              Container(
                                                height: 54,
                                                 30,
                                                alignment: Alignment.center,
                                                padding: EdgeInsets.only(
                                                    left: 0, right: 5),
                                                child: Image.asset(
                                                    'assets/icon_login_verifycode.png'),
                                              ),
                                              Expanded(
                                                child: Container(
                                                  margin:
                                                      EdgeInsets.only(right: 14),
                                                  height: 54,
                                                  alignment: Alignment.center,
                                                  child: Theme(
                                                    data: Theme.of(context)
                                                        .copyWith(
                                                            splashColor:
                                                                Colors.transparent),
                                                    child: TextField(
                                                      controller:
                                                          _verifyCodeController,
                                                      keyboardType:
                                                          TextInputType.number,
                                                      textInputAction:
                                                          TextInputAction.done,
                                                      cursorColor: Colors.orange,
                                                      decoration: InputDecoration(
                                                        hintText: '请输入验证码',
                                                        border: InputBorder.none,
                                                      ),
                                                      inputFormatters: [
                                                        LengthLimitingTextInputFormatter(
                                                            11)
                                                      ],
                                                    ),
                                                  ),
                                                ),
                                              ),
                                              FlatButton(
                                                splashColor: Colors.transparent,
                                                highlightColor: Colors.transparent,
                                                // disabledColor: Colors.grey,
                                                disabledTextColor: Colors.grey[300],
                                                child: Text(vefifyCountText),
                                                onPressed:
                                                    vefifyCountText != defaultText
                                                        ? null
                                                        : () {
                                                            //开启倒计时
                                                            _startTime();
                                                          },
                                              )
                                            ],
                                          ),
                                          decoration: BoxDecoration(
                                            border: Border(
                                              bottom: BorderSide(
                                                  color: Colors.orange,  2),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                            GestureDetector(
                              child: FuntionUtil.button(context, '登陆'),
                              onTap: () {
                                FocusScope.of(context).unfocus();
                              },
                            ),
                          ],
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Image.asset('assets/icon_login_agreed.png'),
                              SizedBox(
                                 5,
                              ),
                              Text('用户同意协议和隐私策略'),
                            ],
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 20),
                          child: Text('本产品不对未成年人开放'),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      }
    
    //开启定时器
      void _startTime() {
        //置空
        _cancelTime();
        countDownTimer = Timer.periodic(Duration(seconds: 1), (t) {
          int second = 60 - t.tick;
          setState(() {
            //60-t.tick代表剩余秒数,如果大于0,设置text为剩余秒数
            if (second > 0) {
              vefifyCountText = '$second秒后重新获取';
            } else {
              vefifyCountText = '点击获取验证码';
              _cancelTime();
            }
          });
        });
      }
    
      //取消定时器
      void _cancelTime() {
        countDownTimer?.cancel();
        countDownTimer = null;
      }
    
      @override
      void dispose() {
        _cancelTime();
        super.dispose();
      }
    }
    
    
    
  • 相关阅读:
    PHP学习九--会话控制session和cookie
    PHP学习八--正则表达式
    PHP学习六--类和对象
    PHP学习五--函数
    PHP学习四--数组
    《30天自制操作系统》day08——鼠标控制与32位模式切换
    java 中 静态块的作用
    学习(一)
    asp中 grideview 更新 无法获取值 解决办法
    ASP.NET中的GridView自带的编辑更新功能
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/11579879.html
Copyright © 2011-2022 走看看