dart语言学习:
1.必须存在的main函数
void main{
print("hello world");
}
2.声明变量
2.1 var
var a=111;
var str="12345";
int str=12345;
string str=12345;
var title="你好";
更改值:
void main()
{
var title=‘你好’;
title=‘我不好’;
print(title);
}
这时输出的值变为 我不好
说明var声明的变量可以更改
2.2 final变量
final title=‘你好’
title='我不好'
这时报错
说明final声明的变量不可以更改
但如果声明的是一个对象,可以更改其属性中的值
(只限制分配这一个动作而不限制变量参数本身)
2.2const变量声明后不管是什么都不能改
-----分割线
时隔10天没学flutter了www,今天跟着b站上的视频学了上手实战了,个人的感觉是一定要上手,之前对着flutter的书本看了很久都没看出个所以然,今天跟着动手学感觉收获颇多~以下都是b站视频的学习笔记,纯小白~大佬请避让
import 'package:flutter/material.dart';
之前看见这句话感觉很懵逼,不明白莫名其妙导入一个这样的东西有什么作用,莫非和c语言中#include <stdio.h>”类似?!好像确实是这样的。
这句话就是导入相关的组件包
由于博主是第一次接触前端的内容,以下是博主自己的一些理解:
flutter框架相当于给你提供了一个房子的框架,会提供像脚手架scafford又或者是各样的组件,就如同搭建房子的各种工具和脚手架一样,你可以自定义你的房子里面有什么元素有什么东西去布置渲染。
//导入控件
void main() => runApp(MyApp());
这个是每个flutter应用程序必有的runApp,app的启动代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//build用来渲染
return MaterialApp(
//每个项目必须有的
title: 'flutter 1 project',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Myhome(),
);
}
}
以这里为例子,应用了StatelessWidget这一个无状态控件
有状态控件Statefulwidget
上面的代码段中调用的Myhome()
class Myhome extends StatelessWidget {
@override
Widget build(BuildContext context) {
//在flutter中,每一个控件都是一个类
return DefaultTabController(
length: 3,
child:
return DefaultTabController
下面将进入Scafford这一个概念:
Scaffold 实现了 基本布局结构,例如 AppBar、Drawer、SnackBar 等,所以为了使用这些布局,也必须要使用 Scaffold。flutter一个基本框架:Root Widget 是 MaterialApp ,然后 MaterialApp 的 子Widget 就是 Scaffold,然后我们在 Scaffolfd 的 子Widget 里写UI。
child: Scaffold(
appBar: AppBar(
title: Text('电影列表'),
centerTitle: true,
actions: [IconButton(onPressed: () {}, icon: Icon(Icons.search))],
),
drawer: Drawer(
IconButton(onPressed: () {}, icon: Icon(Icons.search)
这个就是图标中的点击和查询 用到了Icon这一个组件
下面介绍
加载图片的方式:
home: Scaffold(
appBar: AppBar(title: Text("Flutter UI基础Widget -- 图片和Icon")),
body: Image.network("https://。。。。。。。。.jpg"),
),
network是在网络上搜素显示的照片
以下还有几种方式
---> Image.file(file):从本地文件加载显示图片
这里需要传入图片的本地地址
----> Image.asset(name):从Flutter APP的资源文件里加载显示图片
这里需要传入Flutter APP图片资源文件的路径及图片名字
------>Image.memory(bytes):从内存加载显示图片
drawer: Drawer(
child: ListView(
children: [
UserAccountsDrawerHeader(
accountName: Text('lll'),
accountEmail: Text('abc@232.cn'),
currentAccountPicture:
CircleAvatar(backgroundImage: NetworkImage('')),
),
左侧的菜单栏写法类似这样
ListTile(
title: Text('反馈'),
trailing: Icon(Icons.feedback),
),
ListTile(
title: Text('系统设置'),
trailing: Icon(Icons.settings),
),
Divider(),
ListTile(
title: Text('发布'),
trailing: Icon(Icons.send),
),
ListTile(
title: Text('注销'),
trailing: Icon(Icons.exit_to_app),
),
里面的Divider其实就是画一条分割线
(明天继续更新.....太困了写不下去了www)
------------------------------分割线
更新:
首先填个坑:
Flutter写UI的形式是与Android和IOS的写法有所不同,它使用了声明式的方法来写,类似于似于 Android 的 XML?!
大概长这样,一行行往下写声明
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//build用来渲染
return MaterialApp(
//每个项目必须有的
title: 'flutter 1 project',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Myhome(),
);
}
}
区别于命令式(该代码来源于《Flutter完全手册》)
ViewA a = new ViewA(...)
ViewB b = new ViewB(...)
ViewC c1 = new ViewC(...)
ViewC c2 = New ViewC(...)
// 然后将子view 添加到容器中
a.add(b)
b.add(c1)
b.add(c2)
命令式个人感觉有点类似于各种语言里面的赋值?、?
再补个坑:关于widget
StatefulWidget为什么称为有状态的,为啥能改变UI的状态,原因如下:
有两部分组成:
- Widget
- State
所以Flutter把可以变化的部分都存在State中,当State发生一定的变化的时候,会使用build将Widget重新构造,使得Widget发生了变化,更新UI的状态
所以选择使用StatefulWidget还是StatelessWidget 只需要考虑UI是否改变,改变用StatefulWidget不改变用StatelessWidget 即可。
接下来讲解底部的按钮区域
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.black),
height: 50,
child: TabBar(
labelStyle: TextStyle(height: 0, fontSize: 10),
tabs: [
Tab(
icon: Icon(Icons.movie_filter),
text: '正在热映',
),
Tab(
icon: Icon(Icons.movie_filter),
text: '即将上映',
),
Tab(
icon: Icon(Icons.movie_filter),
text: 'TOP',
)
],
),
),
labelStyle: TextStyle(height: 0, fontSize: 10),其中这一行让height:0的原因是这样Icon就不占高度
所以不会出现text压缩成一坨的情况
接下来讲解数据请求的实现:讲解的是Dio包数据请求的方式
首先要进入到工程的pubspec.yaml文件,找到depencies处,加入这一行,按下ctrl+s保存后它会自动下载
dio: '^5.5.0+1'
(可能以后会有新的版本就不是这一句了,跟着自己VScode报错复制粘贴就行)
在新建的.dart中要加入这一行
import 'package:dio/dio.dart';
Dio dio = new Dio();
class Movielist extends StatefulWidget {
Movielist({Key? key, this.mt = "defalut"}) : super(key: key);
final String mt;
@override
MovieListState createState() {
return new MovieListState();
}
}
get请求使用的方法:
var response = await dio.get(
'https:。。。。。。${widget.mt}?start=$offset&count=$pagesize');
offset是偏移量【计算公式:(page-1)*pagesize】,即从第几个索引开始。
count是表示每一行显示多少条数。
这个要装在 。。。。async { }中
async 是异步函数,该函数使得Dart 可以用同步代码的方式来写异步代码,不需要使用 Future API
await会阻塞当前的操作,等待有结果的返回才执行下一步的操作。
getMovieList() async {
int offset = (page - 1) * pagesize;
//偏移量计算公式:(page-1)*pagesize
var response = await dio.get(
'https://www.。。。。。/api/v2/movie/${widget.mt}?start=$offset&count=$pagesize');
var result = response.data;
print(result);
通过dio获取到的数据:
只要要为私有数据赋值,都需要把赋值的操作放到setState的函数里面, 通过dio返回的数据必须用 [ ] 访问
setState(() {
//通过dio返回的数据必须用[]访问
mlist = result['subjects'];
total = result['total'];
});