dart+j+设计

flutter 组件大全

01、flutter组件之SafeArea

时间 2020.12.16日

自我理解：

把布局始终显示在首页页面的安全区域，用于适配各种异型屏幕（但是我试了一下 手机有限用的华为荣耀的刘海屏没有什么作用呀）

官网地址视频演示

上代码:

class SafeAreaDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _SafeAreaState();
  }

}
class _SafeAreaState extends State<SafeAreaDemo>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: false,
        bottom: false,
        left: false,
        right: false,
        child: ListView(
          children: List.generate(100, (i)=> Text('this is some textthis is some textthis is some text'+i.toString())),
        ),
      )
    );
  }

}

现象

当top值为true时

当top值为false时

02、Opacity

 body: Row(
        children: [
          Text("我是正常字体"),
          Opacity(
              opacity: 0.5,
              child: Text(
                "我是透明字体",
                style: TextStyle(
                    color: Colors.pink,
                    backgroundColor: Colors.blue,
                    fontSize: 24.0),
              ))
        ],
      ),

效果预览

还可以图片进行透明

opacity:opacityValue值随便给相应的数字就可以

官方还提供了动画不透明度

javascript

2、简单数据类型

string方法

// substr(start,length):从某个位置截取指定长度的字符
		var arr = "abcdefg"  //下表是0开始的
		var res = arr.substr(1,4); 
		console.log(res) //bcde
//字符串分割split(string) 根据里面的string分隔截取成数组
		var str = "abc4512abc123defjhjh"
		var res = str.split("12")
		var res = str.split("") //["a", "b", "c", "4", "5", "1", "2", "a", "b", "c", "1", "2", "3", "d", "e", "f", "j", "h", "j", "h"]
        
		console.log(res)
//这个方法主要用  把字符串变成数组

js 运算符

算术运算符

//声明变量
//js 的变量来源有三个 1、浏览器用户的页面获取的的、就是用户网页上写什么我就那什么?
//2、自己写死的的 3、后端发送的  后端发给浏览器起的  那发什么我就那什么？

获取变量数据类型

	var num = "10"
	console.log(typeof(num))
console.log(typeof num)
//typefo 我们知道了数据类型之后有什么用呢？
// 很有用 
//prompt取过来的值是 字符型的
// var age = prompt("请输入您的年龄");
// console.log(age);
// console.log(typeof age)  //string 我们就知道了

//1.我们程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 
   	//只要值相等就可以
   	console.log(18 == "18") //true
   	
   	//2. 我们程序里面有全等 一模一样 要求两侧的值 还有 数据类型完全一致才可以
   	console.log(5 === "5") //false

逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

赋值运算符

数据类型转换

什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

<script type="text/javascript">
		//1.把数字型转换为字符串型 变量.toString()
	var num = 10;
	var str = num.toString();
	console.log(str)
	console.log(typeof str)
	// 2.利用 + 拼接字符串的方法实现转换效果 隐式转换
	console.log(num + '')
	
	</script>

var age = prompt("输入年龄")
	console.log(parseInt(age)) //取整
	console.log(parseFloat('3.14')) //这个可以取浮点数

<script type="text/javascript">
		var a = prompt("请输入第一个值");
		var b = prompt("请输入第二个值")
		var c  = parseFloat(a)+parseFloat(b)
		alert("最后的结果是:"+c)
	
	</script>

grid布局

容器是什么？

容器是大盒子 里面可以放很多东西

里面放的东西就是items 项目

2020.12.18

流程控制

01顺序流程控制

以前我们写的代码是顺序写来的 从上往下写的

02、分支流程控制IF语句

如果以后有很多条件的话 可以用这个 比如

学生的分数 大于90的非常棒 大于80的很棒 大于70不错 大于60的及格 大于50么有几个 如果这样的条件的话 就可以用这个语句来写

02、三元表达式

03、swich语句

04、循环语句for

https://www.bilibili.com/video/BV1ux411d75J?p=77

03、FloatingActionButton

注意：

// floatingActionButtonLocation  拜访在那个位置的属性必须要放在floatingActionButton
//外面 跟body平起平坐
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("clike me");
        },
        child: Icon(Icons.add),
      ),
//注意  如果要图标大一点的话 需要加个coantianer


floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container( //这个地方加一下
        height: 88,
        width: 88,
        child: FloatingActionButton(
          onPressed: () {
            print("clike me");
          },
          child: Icon(
            Icons.add,
            color: Colors.white,
            size: 48,
          ),
          backgroundColor: Colors.orange,
        ),

04、Hero

当我我们页面切换是用来做动画的 页面之间切换的时候可以制作各种动画

2020.12.19

循环过儿 待会儿学

01、数组

数组概念

1.1、数组使用

1.2、获取数组中的元素

1.3、遍历数组

比较重要的知识点

什么是遍历 就是从头到尾访问一次

1.4、数组中新增元素

https://www.bilibili.com/video/BV1ux411d75J?p=110

// 用数组的元素组成字符串join()
<body>
<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>
</body>
//删除数组的最后一个元素pop()
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
</body>
// 数组的末尾添加新的元素 push()
<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
//将一个数组中的元素顺序反转排序reverse()
<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>
//在数组的开头添加新元素 - unshift()
// 数组的末尾添加新的元素 push()
//删除数组的第一个元素 - shift()
//删除数组的最后一个元素pop()
//将一个数组中的元素顺序反转排序reverse()
// 用数组的元素组成字符串join()

https://www.bilibili.com/video/BV1ux411d75J?p=114

明天开始学函数

JAVASCRIPT核⼼技能

开发过程中不怎么用捕获阶段 只要是冒泡

事件对象

这里面的this要注意

我们给Ul 绑定了事件，那么this就指向UI

e.type

e.preventDefault

阻止冒泡

事件委托（代理，委托）

常用的键盘事件

常用键盘事件

这是一个键盘的案例 京东搜索页面的案例

BOM浏览器对象模型

1.BOM概述

2.window对象的常见事件

这样就能在body上面 或者head里面可以写js了

window.addEventListener('load',function(){
    var div = document.querySelector("div");
window.addEventListener("resize",function(){
	//console.log(window.inneiWidth)
	if(window.innerWidth <= 800){
	div.style.display = "none";
	}else {
        div.style.display = "block"
    }
})
})

3.定时器

也可以这样写

这个需要注意 清除定时器的时候 定时器赋值变量的时候 不能直接内部的函数调用 是局部函数 内部拿不到呢？

这样就时间继续递减 这是不对的 所以加IF 判断条件

4.JS执行队列

现在的JS允许创建多个任务的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSgRGPfW-1608721718075)(C:\Users\administered\AppData\Roaming\Typora\typora-user-images\image-20201223123841145.png)]

5.location对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fyxQGt3d-1608721718075)(C:\Users\administered\AppData\Roaming\Typora\typora-user-images\image-20201223124049179.png)]

这样就能跳转到IT网站上面去可了

https://www.ixigua.com/6822832309511651853?id=6823982523970748936&logTag=KWPSi3OR4LxqmFk1Xzlmd

明天从这里开始学

合成创意技法

dart List

常用的循环数据方法forEach,map,where,any,every

dart 函数

---

思考

计算机要不要考研