柚子快報(bào)邀請(qǐng)碼778899分享：Flutter

http://yzkb.51969.com/

Flutter

一、介紹二、開發(fā)環(huán)境配置hello worlddart開發(fā)環(huán)境配置

三、dart1.變量與常量2.數(shù)據(jù)類型3.Function4.類與繼承5.mixin與抽象類6.庫7.異步處理

四、widgets1.文本和字體2.按鈕3.圖片和圖標(biāo)4.下拉框5.單選框和多選框6.輸入框

一、介紹

Flutter是Google推出并開源的移動(dòng)應(yīng)用開發(fā)框架，主打跨平臺(tái)、高保真、高性能。開發(fā)者可以通過Dart語言開發(fā)App，一套代碼同時(shí)運(yùn)行在iOS和Android平臺(tái)。Flutter提供了非常豐富的組件、接口，開發(fā)者可以很快地為Flutter添加native擴(kuò)展。同時(shí)Flutter還使用Native引擎渲染視圖，為用戶提供良好的體驗(yàn)。特點(diǎn)： 跨平臺(tái)自繪繪擎 高性能

二、開發(fā)環(huán)境配置

獲取Flutter SDK并解壓縮 官網(wǎng)地址： https://docs.flutter.dev/release/archive?tab=windows#windows 也可以從官方的github上下載： https://github.com/flutter/flutter/releases設(shè)置環(huán)境變量 在path中添加flutter\bin的全路徑運(yùn)行flutter doctor命令，檢查環(huán)境是否有未安裝的依賴

hello world

為android studio添加Flutter插件使用android studio開發(fā)第一個(gè)Flutter應(yīng)用

dart開發(fā)環(huán)境配置

下載網(wǎng)址：https://gekorm.com/dart-windows/ 或https://dart.dev/get-dart/archive

三、dart

1.變量與常量

void main(){

//var聲明

var username="quan";

username="good";

// dynamic a="good job";

// Object b="good job";

// print(a.length);

// print(b.length);

// final psw="good";

// psw="job";

//

// const psw="good";

// psw="job";

}

2.數(shù)據(jù)類型

void main(){

// num: int and double

int abc=110;

int a=int.parse('119');

double cde=220.111;

double b=double.parse('111.222');

//String

String good=123.toString();

String job=123.22322.toStringAsFixed(2);

print(job);

//bool

//bool result=123>110;

bool result=1=='1';

print(result);

//List 數(shù)據(jù)類型

List list=[1,3,5,7,9];

//List newList=new List();-------已棄用

//newList.add(2);

//newList.addAll([4,6,8,10]);//將數(shù)組中的所有元素添加進(jìn)數(shù)組中

//print(newList);

//print(newList.length);

//print(newList.first);

//print(newList.last);

//print(newList[2])

//Map 對(duì)象類型

Map obj={

'x':1,

'y':2,

'z':3

};

// Map obj2=new Map();------已棄用

// obj2['x']=1;

// obj2['y']=2;

print(obj);

//print(obj2);

print(obj.containsKey('x'));//是否包含某個(gè)key

print(obj.containsKey('a'));

obj.remove('y');

print(obj);

}

3.Function

void main(){

String username=getUserName();

String userInfo=getPersonInfo(111);

print(userInfo);

int age=addAge(111);

print(age);

int age2=addAge2(age1:119);

print(age2);

var list=["abc","cde","def"];

//匿名函數(shù)

list.forEach((str) {

print(str);

});

}

String getUserName(){

return "hello world";

}

String getPersonInfo(int userId){

Map userInfoObj={

"111":"zhangsan",

"222":"lisi"

};

return userInfoObj[userId.toString()];

}

//可選參數(shù)

int addAge(int age1,[int age2=0]){

return age1+age2;

}

//默認(rèn)值

int addAge2({int age1=0,int age2=0}){

return age1+age2;

}

4.類與繼承

void main(){

var p=new Person(23,"zhangsan");

// p.age=123;

print(p.age);

print(p.name);

p.sayHello();

var w=new Worker(18, "lisi", 3500);

w.sayHello();

}

//類

class Person{

int age=0;

String name="";

//構(gòu)造函數(shù)

Person(int age,String name){

this.age=age;

this.name=name;

}

void sayHello(){

print("my name is:"+this.name);

}

}

//繼承

class Worker extends Person{

//Worker(super.age, super.name);

int salary=0;

//擴(kuò)展

Worker(int age,String name,int salary):super(age,name){

this.salary=salary;

}

//重寫

@override//告訴編譯器/程序員這是一個(gè)重寫方法

void sayHello(){

super.sayHello();

print("my salary is:"+this.salary.toString());

}

}

5.mixin與抽象類

dart無法多繼承

void main(){

var p=new Person(18,"zhangsan");

p.eat();

p.sleep();

p.sayHello();

}

mixin Eat{

void eat(){

print("eat");

}

// void sayHello(){

// print("say Hello in eat");

// }

}

mixin Sleep{

void sleep(){

print("sleep");

}

// void sayHello(){

// print("say Hello in sleep");

// }

}

//抽象類，不能被實(shí)例化

abstract class Animal{

//抽象方法，需在實(shí)例中實(shí)現(xiàn)

void have_a_baby();

}

//類

class Person extends Animal with Eat,Sleep{

int age=0;

String name="";

//構(gòu)造函數(shù)

Person(int age,String name){

this.age=age;

this.name=name;

}

//混合里如果有同名方法，先找自身類的方法，后找混合的最后一個(gè)類的方法

void sayHello(){

print("my name is:"+this.name);

}

@override

void have_a_baby() {

print("have a baby");

}

}

6.庫

外部庫需要在pubspec.yaml文件中寫明加載依賴，然后在終端執(zhí)行pub get 外部庫網(wǎng)址：https://pub.dev

//自寫庫

import 'pkg/Calc.dart';

//外部庫

import 'package:http/http.dart' as http;

//dart自身庫 延時(shí)加載

import 'dart:math' deferred as math;

// 如果pub get總是下載失敗的話，可以使用國內(nèi)的鏡像

// 設(shè)定環(huán)境變量：PUB_HOSTED_URL=https://pub.flutter-io.cn

void main () async {

int result = add(3,4);

print(result);

var m=new Calc(10, 5);

m.minus();

// var url = Uri.https('example.com', 'whatsit/create');

// var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});

// print('Response status: ${response.statusCode}');

// print('Response body: ${response.body}');

//

// print(await http.read(Uri.https('www.baidu.com')));

// var r=new Random();

// print(r.nextInt(10));

await math.loadLibrary();

var r=new math.Random();

print(r.nextInt(10));

}

7.異步處理

void main() async {

print("sat Hello");

await Future.delayed(new Duration(seconds: 5),(){

print("chibaole");

});

print("play game");

// Future.wait([

// Future.delayed(new Duration(seconds: 1),(){

// print("001");

// });

// Future.delayed(new Duration(seconds: 3),(){

// print("002");

// });

// Future.delayed(new Duration(seconds: 2),(){

// print("003");

// });

// ]).then((List results){

// print("all over");

// });

await Future.delayed(new Duration(seconds: 1),(){

print("001");

});

await Future.delayed(new Duration(seconds: 3),(){

print("002");

});

await Future.delayed(new Duration(seconds: 2),(){

print("003");

});

}

四、widgets

1.文本和字體

@override

Widget build(BuildContext context) {

const styles=TextStyle(

color: const Color(0xffff0000),//十六進(jìn)制顏色前兩位為透明度，后六位為顏色//Colors.yellow

fontSize: 20,

fontFamily: "yahei",

decoration: TextDecoration.underline,

decorationStyle: TextDecorationStyle.dashed

);

return Scaffold(

appBar: AppBar(

backgroundColor: Theme.of(context).colorScheme.inversePrimary,

title: Text(widget.title),

),

body: Column(

children: [

Text("hello worldhello worldhello worldhello worldhello worldhello worldhello world",

textAlign: TextAlign.center,

maxLines: 1,

overflow: TextOverflow.ellipsis,

textScaleFactor: 1.4,

),

Text("樣式測試",

style: styles,

),

Text.rich(TextSpan(

children: [

TextSpan(text:"主頁：",

style: TextStyle(

fontSize: 30

)

),

TextSpan(text:"https://www.baidu.com",

style: TextStyle(

color: Colors.blue,

fontSize: 25

)

)

]

))

],

),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: const Icon(Icons.add),

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

2.按鈕

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

backgroundColor: Theme.of(context).colorScheme.inversePrimary,

title: Text(widget.title),

),

body: Column(

children: [

ElevatedButton(

child:Text("RaisedButton"),

onPressed:()=>{

print("RaisedButton pressed")

}

),

TextButton(

child:Text("FlatButton"),

onPressed:()=>{

print("FlatButton pressed")

}

),

OutlinedButton(

child:Text("OutlinedButton"),

onPressed:()=>{

print("OutlinedButton pressed")

}

),

TextButton(

onPressed:()=>{

print("FlatButton pressed")

},

style:ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.blue),

shape: MaterialStateProperty.all(

RoundedRectangleBorder(

borderRadius: BorderRadius.circular(10.0), // 設(shè)置圓角半徑

),

)

),

child:Text("FlatButton自定義"),

),

],

),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: const Icon(Icons.add),

), // This trailing comma makes auto-formatting nicer for build methods.

);

}

3.圖片和圖標(biāo)

加載本地資源

@override

Widget build(BuildContext context) {

const style = TextStyle(

color:const Color(0xffff0000),//Colors.yellow

fontSize:20,

fontFamily:'yahei',

decoration: TextDecoration.underline,

decorationStyle: TextDecorationStyle.dashed

);

return Scaffold(

appBar: AppBar(

title: Text('Hello world!'),

actions: [

IconButton(

icon: Icon(Icons.shopping cart),

tooltip: 'Open shopping cart',

onPressed: () {

print('Shopping cart opened')

},

),

],

),

body:Column(

children: [

Image.asset(static/pircture/mvp.png,

width:200,

)//放圖片路徑,可以右擊文件然后新建一個(gè)文件夾放圖片

]

)

)

}

這邊要解開

加載網(wǎng)絡(luò)資源

//network代表要使用網(wǎng)絡(luò)資源

Image.network("http://......",

width:150)

//控制圖片填充效果

fit:BoxFit.cover

//設(shè)定顏色混合(拿別的顏色混到圖片里去)

color:Color.pink,

colorBlendMode:BlendMode.difference,

圖標(biāo) 使用icon這個(gè)類 如果圖標(biāo)不夠用了,想使用一個(gè)新的圖標(biāo),可以支持icon font(淘寶的矢量圖標(biāo)庫) 解壓縮包,找到ttf文件,就是我們要使用庫 在pubspec中引入 新建一個(gè)文件fonts來引入路徑 定義一個(gè)自己的圖標(biāo)庫,在lib中定義一個(gè)Dart File文件叫Myicon.dart

import 'package:flutter/material.dart';

class MyIcon [

static const IconData huawei = const IconData(

0xe82e,

fontFamily:'myGoodIcon',

matchTextDirection: true

);

static const IconData oppo = const IconData(

0xe82d,

fontFamily:'myGoodIcon',

matchTextDirection: true

);

static const IconData xiaomi= const IconData(

0x832,

fontFamily:'myGoodIcon',

matchTextDirection: true

);

]

寫完上面代碼后,到main.dart文件中引入

import 'MYIcon.dart'

可以設(shè)置顏色

Icon(MyIcon.huawei,color:Color.yellow)

pub里面報(bào)錯(cuò)的話,可能是縮進(jìn)問題

4.下拉框

下拉框里面有選項(xiàng),有選項(xiàng)的話還需要知道選的是第幾個(gè),這才是一個(gè)真正的下拉框

class MyDropDownButton extends StatefulWidgets {

@override

State createState() {

return _MyDropDownButton();

}

}

class _MyDropDownButton extends State {

List getCityList() [

List cityList = new List();

cityList.add(DropdownMenuItem(child: new Text("上海"), value:"shanghai"));

cityList.add(DropdownMenuItem(child: new Text("北京"), value:"beijing"));

cityList.add(DropdownMenuItem(child: new Text("廣州"), value:"guangzhou"));

cityList.add(DropdownMenuItem(child: new Text("深圳"), value:"shenzhen"));

return cityList;

]

@override

Widget build(BuildContext context) {

return new Column(

children:[

new DropdownButton(

items:getCityList(),

hint: new Text("請(qǐng)選擇城市"),

onChanged: null

)

]

)

}

}

想要它顯示出來,在Scaffold里面添加 還需要寫一個(gè)變量來存選中的city

class MyDropDownButton extends StatefulWidgets {

@override

State createState() {

return _MyDropDownButton();

}

}

class _MyDropDownButton extends State {

List getCityList() [

List cityList = new List();

cityList.add(DropdownMenuItem(child: new Text("上海"), value:"shanghai"));

cityList.add(DropdownMenuItem(child: new Text("北京"), value:"beijing"));

cityList.add(DropdownMenuItem(child: new Text("廣州"), value:"guangzhou"));

cityList.add(DropdownMenuItem(child: new Text("深圳"), value:"shenzhen"));

return cityList;

]

var selectedCity;

@override

Widget build(BuildContext context) {

return new Column(

children:[

new DropdownButton(

items:getCityList(),

hint: new Text("請(qǐng)選擇城市"),

value: selectedCity,

onChanged: (val) {

setState(() {

this.selectedCity = val;//把值賦給臨時(shí)變量

});

}

)

],

);

}

}

5.單選框和多選框

單選框

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Single Selection Example'),

),

body: SingleSelectionWidget(),

),

);

}

}

class SingleSelectionWidget extends StatefulWidget {

@override

_SingleSelectionWidgetState createState() => _SingleSelectionWidgetState();

}

class _SingleSelectionWidgetState extends State {

String selectedFruit = '';

@override

Widget build(BuildContext context) {

return Column(

children: [

RadioListTile(

title: Text('Apple'),

value: 'apple',

groupValue: selectedFruit,

onChanged: (value) {

setState(() {

selectedFruit = value;

});

},

),

RadioListTile(

title: Text('Banana'),

value: 'banana',

groupValue: selectedFruit,

onChanged: (value) {

setState(() {

selectedFruit = value;

});

},

),

],

);

}

}

多選框

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Multiple Selection Example'),

),

body: MultipleSelectionWidget(),

),

);

}

}

class MultipleSelectionWidget extends StatefulWidget {

@override

_MultipleSelectionWidgetState createState() => _MultipleSelectionWidgetState();

}

class _MultipleSelectionWidgetState extends State {

List selectedFruits = [];

@override

Widget build(BuildContext context) {

return Column(

children: [

CheckboxListTile(

title: Text('Strawberry'),

value: selectedFruits.contains('strawberry'),

onChanged: (value) {

setState(() {

if (value) {

selectedFruits.add('strawberry');

} else {

selectedFruits.remove('strawberry');

}

});

},

),

CheckboxListTile(

title: Text('Mango'),

value: selectedFruits.contains('mango'),

onChanged: (value) {

setState(() {

if (value) {

selectedFruits.add('mango');

} else {

selectedFruits.remove('mango');

}

});

},

),

],

);

}

}

使用RadioListTile和CheckboxListTile小部件來創(chuàng)建單選框和多選框。通過修改value屬性以及處理onChanged回調(diào)函數(shù)，您可以實(shí)現(xiàn)單選和多選的功能。

6.輸入框

在Flutter中，可以使用TextField小部件來創(chuàng)建輸入框，讓用戶可以在應(yīng)用程序中輸入文本。TextField提供了各種屬性和回調(diào)函數(shù)，以允許您自定義輸入框的外觀和行為

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Text Input Example'),

),

body: TextInputWidget(),

),

);

}

}

class TextInputWidget extends StatefulWidget {

@override

_TextInputWidgetState createState() => _TextInputWidgetState();

}

class _TextInputWidgetState extends State {

TextEditingController _textEditingController = TextEditingController();

@override

Widget build(BuildContext context) {

return Padding(

padding: EdgeInsets.all(16.0),

child: TextField(

controller: _textEditingController,

decoration: InputDecoration(

labelText: 'Enter your text here',

border: OutlineInputBorder(),

),

),

);

}

@override

void dispose() {

_textEditingController.dispose();

super.dispose();

}

}

柚子快報(bào)邀請(qǐng)碼778899分享：Flutter

http://yzkb.51969.com/

推薦鏈接