1.Flutter實(shí)現(xiàn)小球跟隨手指運(yùn)動(dòng)
功能比較簡(jiǎn)單，我也是剛剛開始學(xué)Flutter，主要用來記錄一下學(xué)習(xí)過程，廢話不多說，先看效果。
在這里插入圖片描述
使用的組件：
Stack:層疊布局，相當(dāng)于Web中的絕對(duì)定位、Android中的Frame布局是相似的。
Positioned：開始位置是（0,0），移動(dòng)之后記錄到定點(diǎn)（0,0）的left,top距離，所有坐標(biāo)為（left,top）。
GestureDetector：手勢(shì)控制。屏幕上的觸摸點(diǎn)位置每次改變時(shí)，都會(huì)觸發(fā)這個(gè)回調(diào)。
container：容器
總共代碼如下：
import 'package:flutter/material.dart';
class PositionedGroup extends StatefulWidget {
@override
_PositionedGroupState createState() => _PositionedGroupState();
}
class _PositionedGroupState extends State<PositionedGroup> {
double moveX=0,moveY=0;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Position移動(dòng)小球?qū)W習(xí)'),
),
body: Stack(
children: <Widget>[
Positioned(
left: moveX,
top: moveY,
child: GestureDetector(
onPanUpdate: (e) => _domove(e),
child: Container(
width: 72,
height: 72,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(36),
),
),
),
),
],
)),
);
}
_domove(DragUpdateDetails e){
setState(() {
moveX+=e.delta.dx;
moveY+=e.delta.dy;
});
print(e);
}
}
2.如何打開第三方應(yīng)用
1.導(dǎo)入依賴：
url_launcher: ^5.0.2
在如圖pubspec.xml文件里面導(dǎo)入依賴
在這里插入圖片描述
2.data代碼
跳轉(zhuǎn)代碼如下,url為跳轉(zhuǎn)地址：
_langchUrl() async{
const url='http://www.itdecent.cn';
if(await canLaunch((url))){
await launch(url);
}else{
throw 'Could not launch $url';
}
}
總體代碼測(cè)試代碼如下：
粘貼代碼比較亂可以用Ctrl+Alt+L快速格式化，但是有時(shí)候會(huì)與qq頭像鎖定的快捷鍵一樣，必須關(guān)掉QQ。
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class OpenWeb extends StatefulWidget {
@override
_OpenWebState createState() => _OpenWebState();
}
class _OpenWebState extends State<OpenWeb> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('如何打開第三方應(yīng)用'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(onPressed: ()=>_langchUrl(),
child: Text('打開瀏覽器'),
)
],
),
),
),
);
}
_langchUrl() async{
const url='http://www.itdecent.cn';
if(await canLaunch((url))){
await launch(url);
}else{
throw 'Could not launch $url';
}
}
}
3.快速實(shí)現(xiàn)夜間模式
Brightness.dark修改界面為夜間模式
Brightness.light修改界面為日間模式
ThemeData(
brightness:Brightness.dark,
primarySwatch: Colors.blue,
)
總體代碼：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class OpenWeb extends StatefulWidget {
@override
_OpenWebState createState() => _OpenWebState();
}
class _OpenWebState extends State<OpenWeb> {
Brightness brightness=Brightness.light;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
brightness:brightness,
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('如何實(shí)現(xiàn)夜間模式'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(onPressed:(){
setState(() {
if(brightness==Brightness.dark){
brightness=Brightness.light;
}else{
brightness=Brightness.dark;
}
});
},
child: Text('切換模式'),
)
],
),
),
),
);
}
}
效果：
在這里插入圖片描述
4.字體改變
1.免費(fèi)字體ttf下載網(wǎng)站
2.新建font文件夾，放入字體。
在這里插入圖片描述
3.在pubspec.xml里面放入如下代碼
其中font/test.ttf為你的字體的地址，可以參考第二步驟的ttf放置位置
fonts:
- family: test
fonts:
- asset: font/test.ttf
在這里插入圖片描述
4.fontFamily: 'test'設(shè)置字體
其他fontFamily: 'test'中的test為第三步family中的test名字相同
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class OpenWeb extends StatefulWidget {
@override
_OpenWebState createState() => _OpenWebState();
}
class _OpenWebState extends State<OpenWeb> {
Brightness brightness=Brightness.light;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
fontFamily: 'test', //此處設(shè)置修改改頁面所有字體
brightness:brightness,
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('如何打開第三方應(yīng)用'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(onPressed:(){
setState(() {
if(brightness==Brightness.dark){
brightness=Brightness.light;
}else{
brightness=Brightness.dark;
}
});
},
child: Text('切換模式',style: TextStyle(fontFamily: 'test'),),
//此處設(shè)置只修改單個(gè)Text的字體
)
],
),
),
),
);
}
}
效果：
在這里插入圖片描述
6.加載圓形網(wǎng)絡(luò)圖片
ClipOval(
child: SizedBox(
width: 100,
height: 100,
child: Image.network('https://i.ibb.co/CQf368G/fbf18c6a86-Bd6-LF.jpg'),
),
),
在這里插入圖片描述
