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之下的更多相关文章

  1. WebView设置透明和设置背景图片的方法

    http://blog.csdn.net/Vincent20111024/article/details/8478219 1. WebView若要设置背景图,直接设置web .setBackgroun ...

  2. VC 对话框设置背景颜色和图片

    改变背景颜色,有两种方法: 1.在app的初始化函数中调用:void SetDialogBkColor( COLORREF clrCtlBk = RGB(192, 192, 192), COLORRE ...

  3. 解决 UIView 设置背景为UIImage图片变型问题[XXX setBackgroundColor:[UIColor colorWithPatternImage:XXX]];

    [self.drawingViewsetBackgroundColor:[UIColorcolorWithPatternImage:[selfthumbnailWithImageWithoutScal ...

  4. android 设置背景为空(透明)

    在给控件设置背景时像ps那样的背景透明 在3.0以下可以使用 imageView.setBackgroundResource(android.R.id.empty); 但是这个方法在3.0以上会出现 ...

  5. android设置背景图片透明

    设置Activiyt为透明可以在Activity中引用系统透明主题android:theme="@android:style/Theme.Translucent" 设置背景图片透明 ...

  6. 解决css设置背景透明,文字不透明

    设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标 ...

  7. Activity设置背景透明之开发坑

    Activity设置背景透明的常规方法 方法一.在Manifest.xml中,直接在需要设置的Activity中添加主题样式: Android:theme="@android:style/T ...

  8. Sublime如何设置背景透明

    Sublime如何设置背景透明 下载sublime 透明背景插件 我用的是git下载插件: git clone https://github.com/vhanla/SublimeTextTrans.g ...

  9. ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法

    IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是 ...

随机推荐

  1. deep_learning_LSTM长短期记忆神经网络处理Mnist数据集

    1.RNN(Recurrent Neural Network)循环神经网络模型 详见RNN循环神经网络:https://www.cnblogs.com/pinard/p/6509630.html 2. ...

  2. deep_learning_Function_LSTM_dynamic_rnn

    一. tf.nn.dynamic_rnn的输出 tf.nn.dynamic_rnn的输入参数如下 tf.nn.dynamic_rnn(    cell,    inputs,    sequence_ ...

  3. 这打车App麻烦了!遭黑客勒索巨额比特币

    6月17日下午,易到用车发布<客服电话故障公告>称,5月25日-26日,易到平台遭到网络黑客攻击,核心服务器被入侵,攻击导致易到核心数据被加密,服务器宕机,绝大部分服务功能受到波及,且攻击 ...

  4. stm32 development

    1.www.st.com st官网 2.www.stmcu.com.cn st中文网 3.www.stmcu.org.cn st中文社区

  5. Linux 查看主机、CPU、内存、内核、网卡或MAC地址、关机、重启、当前使用人、网络连接状态、主机目前使用状态

    7 uname -a 显示主机名.内核.硬件结构等全部信息 unmae -r 只显示内核 查看Redhat和centos的内核版本也可以用cat /etc/redhat-release 或cat /e ...

  6. C#和Java的最大不同

    本文摘抄自知乎. 作者:匿名用户链接:https://www.zhihu.com/question/20451584/answer/27163009来源:知乎著作权归作者所有.商业转载请联系作者获得授 ...

  7. highcharts的基本使用(转载)

    1 概述 Highcharts是一个跨浏览器的JavaScript图表控件,支持柱状图.趋势图.面积图.饼图.环形图.组合图.堆积图.散点图. Highcharts图表的基本功能,只需要引入两个JS类 ...

  8. 第二章 Vue快速入门-- 18 v-for中key的使用注意事项

    注意:如果属性和方法还没定义直接使用的话,就会报   xxx is not defined 导致界面不能正常显示.我看视频教程里老师的可以直接使用,而且界面正常显示,可能是vue版本不同吗?还不清楚 ...

  9. python 继承:重写、拓展(六)

    1.继承:父类有的子类也有 2.多继承:若继承多个父类有相同的函数,则继承前面的函数,传递参数的个数也与继承的函数位置有关 3.超继承:针对继承一个父类使用,不仅有父类的特写同时也有自己的新特性  s ...

  10. HDU - 6589 Sequence (生成函数+NTT)

    题目链接 设序列a的生成函数$\large f(x)=\sum\limits_{i=0}^{n-1}a_ix^i$,则操作1,2,3分别对应将$f(x)$乘上$\Large\frac{1}{1-x}, ...