Flutter中的widget,docker入門書籍推薦

程序猿不想掉頭發 2021-09-19 11:48:11 阅读数:353

flutter widget docker

void initState() {
super.initState();
_i= 1;
}
@override
Widget build (BuildContext context) {
return MaterialApp (
title: “Widget演示”,
theme: ThemeData(),
home:Scaffold (
appBar: AppBar (title: Text(“Widget”)),
body: RaisedButton (
onPressed: () {
//修改狀態,setState會重新調用build更新ui
setState(() {_i++;});
},
child: Text(“Hello,Flutter! $_i”),
),
));
}
}


## State生命周期
State的生命周期為:
![Flutter中的widget,docker入門書籍推薦_Java](https://s7.51cto.com/images/20210919/1632022636862560.jpg)
State類除了 build之外還提供了很多方法能够讓我們重寫,這些方法會在不同的狀態下由Flutter調起執行,所以這些方法我們就稱之為生命周期方法。在這裏我們用statefulwidget點擊按鈕後移除子statefulwidget。
```java
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isShowChild;
///當Widget第一次插入到Widget樹時會被調用,對於每一個State對象,Flutter framework只會調用一次該回調
@override
void initState() {
super.initState();
isShowChild = true;
debugPrint("parent initState......");
}
///初始化時,在initState()之後立刻調用
///當依賴的InheritedWidget rebuild,會觸發此接口被調用
@override
void didChangeDependencies() {
super.didChangeDependencies();
debugPrint("parent didChangeDependencies......");
}
///繪制界面,當setState觸發的時候會再次被調用
@override
Widget build(BuildContext context) {
debugPrint("parent build......");
return MaterialApp(
home: Scaffold(
body: Center(
child: RaisedButton(
onPressed: () {
setState(() {
isShowChild = !isShowChild;
});
},
child: isShowChild ? Child() : Text("演示移除Child"),
)),
),
);
}
///狀態改變的時候會調用該方法,比如調用了setState
@override
void didUpdateWidget(MyApp oldWidget) {
super.didUpdateWidget(oldWidget);
debugPrint("parent didUpdateWidget......");
}
///當State對象從樹中被移除時,會調用此回調
@override
void deactivate() {
super.deactivate();
debugPrint('parent deactivate......');
}
///當State對象從樹中被永久移除時調用;通常在此回調中釋放資源
@override
void dispose() {
super.dispose();
debugPrint('parent dispose......');
}
}
class Child extends StatefulWidget {
@override
_ChildState createState() => _ChildState();}
class _ChildState extends State<Child> {
@override
Widget build(BuildContext context) {
debugPrint("child build......");
return Text('lifeCycle');
}
@override
void initState() {
super.initState();
debugPrint("child initState......");
}
///初始化時,在initState()之後立刻調用
///當依賴的InheritedWidget rebuild,會觸發此接口被調用
@override
void didChangeDependencies() {
super.didChangeDependencies();
debugPrint("child didChangeDependencies......");
}
///父widget狀態改變的時候會調用該方法,比如父節點調用了setState
@override
void didUpdateWidget(Child oldWidget) {
super.didUpdateWidget(oldWidget);
debugPrint("child didUpdateWidget......");
}
///當State對象從樹中被移除時,會調用此回調
@override
void deactivate() {
super.deactivate();
debugPrint('child deactivate......');
}
///當State對象從樹中被永久移除時調用;通常在此回調中釋放資源
@override
void dispose() {
super.dispose();
debugPrint('child dispose......');
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.

執行的輸出結果顯示為:

  • 運行到顯示
I/flutter (22218): parent initState......
I/flutter (22218): parent didChangeDependencies......
I/flutter (22218): parent build......
I/flutter (22218): child initState......
I/flutter (22218): child didChangeDependencies......
I/flutter (22218): child build......

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 點擊按鈕會移除Child
I/flutter (22218): parent build......
I/flutter (22218): child deactivate......
I/flutter (22218): child dispose......

  • 1.
  • 2.
  • 3.
  • 將MyApp的代碼由 child:isShowChild?Child():Text(“演示移除Child”),改為
    child:Child(),點擊按鈕時
I/flutter (22765): parent build......
I/flutter (22765): child didUpdateWidget......
I/flutter (22765): child build......

  • 1.
  • 2.
  • 3.

基礎widget

文本顯示

Text

Text是展示單一格式的文本Widget(Android TextView)。

import 'package:flutter/material.dart';
/// main方法 調用runApp傳遞Widget,這個Widget成為widget樹的根
void main() => runApp(TextApp());
/// 1、單一文本Text
//創建一個無狀態的Widget
class TextApp extends
StatelessWidget {
@override
Widget build(BuildContext context) {
//封裝了應用程序實現Material Design所需要的一些widget
return MaterialApp(
title: "Text演示",
//標題,顯示在recent時候的標題 
//主頁面 
//Scaffold : Material Design布局結構的基本實現。
home: Scaffold(
//ToolBar/ActionBar
appBar: AppBar(title: Text("Text")),
body: Text("Hello,Flutter"
),
),
);
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

在使用 Text顯示文字時候,可能需要對文字設置各種不同的樣式,類似Android的 android:textColor/Size等

在Flutter中也擁有類似的屬性

Widget _TextBody() {
return Text(
"Hello,Flutter",
style: TextStyle(
//顏色
color: Colors.red,
//字號 默認14
fontSize: 18,
//粗細
fontWeight: FontWeight.w800,
//斜體
fontStyle: FontStyle.italic,
//underline:下劃線,overline:上劃線,lineThrough:删除線
decoration: TextDecoration.lineThrough,
decorationColor: Colors.black,
//solid:實線,double:雙線,dotted:點虛線,dashed:橫虛線,wavy:波浪線
decorationStyle:
TextDecorationStyle.wavy),
);
}
class TextApp extends StatelessWidget {
@override
Widget
build(BuildContext context)
{
return MaterialApp(
title: "Text演示",
home: Scaffold(
appBar: AppBar(title: Text("Text")),
body: _TextBody(),
),
);
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

Flutter中的widget,docker入門書籍推薦_程序員_02
RichText

如果需要顯示更為豐富樣式的文本(比如一段文本中文字不同顏色),可以使用 RichText或者 Text.rich

Widget _RichTextBody() {
var textSpan = TextSpan(
text: "Hello",
style: TextStyle(color: Colors.red),
children: [
TextSpan(text: "Flu", style: TextStyle(color: Colors.blue)),
TextSpan(text: "uter", style: TextStyle(color: Colors.yellow)),
],
);
//Text.rich(textSpan);
return RichText(text: textSpan);
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

Flutter中的widget,docker入門書籍推薦_Java_03
DefaultTextStyle
在widget樹中,文本的樣式默認是可以被繼承的,因此,如果在widget樹的某一個節點處設置一個默認的文本樣式,那麼該節點的子樹中所有文本都會默認使用這個樣式。相當於在Android中定義 Theme

Widget _DefaultStyle(){
DefaultTextStyle(
//設置文本默認樣式
style: TextStyle(
color:Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text("Hello Flutter!"),
Text("Hello Flutter!"),
Text("Hello Flutter!",
style: TextStyle(
inherit: false,
//不繼承默認樣式
color: Colors.grey
),
),
],
),
);
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

FlutterLogo
這個Widget用於顯示Flutter的logo…

Widget flutterLogo() {
return FlutterLogo(
//大小
size: 100,
//logo顏色 默認為 Colors.blue
colors: Colors.red,
//markOnly:只顯示logo,horizontal:logo右邊顯示flutter文字,stacked:logo下面顯示文字
style: FlutterLogoStyle.stacked,
//logo上文字顏色
textColor: Colors.blue,
);
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

Flutter中的widget,docker入門書籍推薦_程序員_04
Icon

主要用於顯示內置圖標的 Widget

Widget icon() {
return Icon(
//使用預定義Material icons 
// https://docs.flutter.io/flutter/material/Icons-class.html
Icons.add,
size: 100,
color: Colors.red);
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

Flutter中的widget,docker入門書籍推薦_後端_05
Image
顯示圖片的 Widget。圖片常用的格式主要有bmp,jpg,png,gif,webp等,Android中並不是天生支持gif和webp動圖,但是這一特性在flutter中被很好的支持了。

Flutter中的widget,docker入門書籍推薦_程序員_06
Iamge.asset
在工程目錄下創建目錄,如:assets,將圖片放入此目錄。打開項目根目錄:pubspec.yaml
Flutter中的widget,docker入門書籍推薦_Java_07

return MaterialApp(
title: "Image演示",
home: Scaffold(
appBar: AppBar(title: Text("Image")),
body: Image.asset("assets/banner.jpeg"),
),
);

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

Image.file
在sd卡中放入一張圖片。然後利用path_provider庫獲取sd卡根目錄(Dart庫版本可以在: https://pub.dartlang.org/packages查詢)。
Flutter中的widget,docker入門書籍推薦_後端_08
注意權限

class ImageState extends State<ImageApp> {
Image image;
@override
void initState() {
super.initState();
getExternalStorageDirectory().then((path) {
setState(() {
image = Image.file(File("${path.path}${Platform.pathSeparator}banner.jpeg"
));
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Image演示",
home: Scaffold(
appBar: AppBar(title: Text("Image")),
body: image,
),
);
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

Image.network

直接給網絡地址即可。
Flutter 1.0,加載https時候經常出現證書錯誤。必須斷開AS打開app

Image.memory

Future<List<int>> _imageByte() async {
String path = (await getExternalStorageDirectory()).path;
return await File("$path${Platform.pathSeparator}banner.jpeg").readAsBytes();
}
class ImageState extends State<ImageApp> {
Image image;
@override
void initState() {
super.initState();
_imageByte().then((bytes) {
setState(() {
image = Image.memory(bytes);
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Image演示",
home: Scaffold(
appBar: AppBar(title: Text("Image")),
# 驚喜
最後還准備了一套上面資料對應的面試題(有答案哦)和面試時的高頻面試算法題(如果面試准備時間不够,那麼集中把這些算法題做完即可,命中率高達85%+![Flutter中的widget,docker入門書籍推薦_程序員_09](https://s3.51cto.com/images/20210919/1632022639377226.jpg)
![Flutter中的widget,docker入門書籍推薦_Java_10](https://s4.51cto.com/images/20210919/1632022639398198.jpg)
**[CodeChina開源項目:【一線大廠Java面試題解析+核心總結學習筆記+最新講解視頻】](https://ali1024.coding.net/public/P7/Java/git)**
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
版权声明:本文为[程序猿不想掉頭發]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919114810754T.html