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,
              width: 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,
                                          width: 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(
                                            width: 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,
                                            width: 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, width: 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(
                            width: 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();
  }
}

flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下

上一篇:linux (ubuntu) 下设置 tomcat 随系统自动启动


下一篇:vue-cli脚手架搭建项目及Axios封装