摘要:是程序的主入口導(dǎo)包程序入口相當(dāng)于主頁面可以看到,這個返回了一個的,作為程序的主界面。
什么是 WidgetFlutter 的核心設(shè)計思想便是一切即 Widget,在 Flutter 的世界里,包括views、view、 controllers、layouts等在內(nèi)的概念都建立在 Widget 之上,可以理解成原生的View。
lib/main.dart 是程序的主入口
//導(dǎo)包
import "package:flutter/material.dart";
//程序入口
void main() => runApp(MyApp());
//相當(dāng)于主頁面
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Demo",
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: "Home Page"),
);
}
}
可以看到,這個返回了一個MaterialApp的Widget,作為程序的主界面。
父級組件Widget | 介紹 |
---|---|
StatelessWidget | 無狀態(tài)widget,類似靜態(tài)頁面,不與用戶交互 |
StatefulWidget | 有狀態(tài)widget,可以改變,可以與用戶交互 |
Widget | 介紹 |
---|---|
MaterialApp | 一般用作APP頂層的主頁入口,可配置主題,多語言,路由等 |
Scaffold | 一般用戶頁面的承載Widget,包含appbar、snackbar、drawer等material design的設(shè)定。 |
Appbar | 一般用于Scaffold的appbar ,內(nèi)有標(biāo)題,二級頁面返回按鍵等,當(dāng)然不止這些,tabbar等也會需要它 |
Text | 顯示文本,類似于TextView |
Image | 顯示圖片,可以加載本地資源、file、網(wǎng)絡(luò)圖片、內(nèi)存圖片 |
TextField | 輸入框,類似于EditText |
Text
Text(
//文本
"我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text我是Text",
//超出屏幕 clip裁剪,fade漸隱,ellipsis省略號
overflow: TextOverflow.ellipsis,
//對齊方式
textAlign: TextAlign.center,
//文本方向
textDirection: TextDirection.rtl,
//樣式
style: TextStyle(
color: Colors.lightBlue,
fontSize: 14,
fontStyle: FontStyle.italic,
backgroundColor: Colors.black87,
//none無文字裝飾,lineThrough刪除線,overline文字上面顯示線,underline文字下面顯示線
decoration: TextDecoration.lineThrough,
//字母間隙
letterSpacing: 10,
),
)
Image
方法 | 作用 |
---|---|
Image.asset、 Image(image: new AssetImage() | 加載本地圖片 |
Image.file、 Image(image: new FileImage() | file |
Image.memory、 Image(image: new MemoryImage() | 加載內(nèi)存byte數(shù)組 |
Image.network、 Image(image: new NetworkImage() | 加載網(wǎng)絡(luò)圖片 |
其中,asset首先需要在根目錄下建立images文件夾,然后在pubspec.yaml文件中添加引用才能使用
flutter: uses-material-design: true assets: - images/ic_launcher.png
Image.asset(
"images/ic_launcher.png",
width: 100,
height: 100,
fit: BoxFit.fitHeight,
),
Image(
image: new NetworkImage(
"http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
width: 100,
height: 100,
fit: BoxFit.cover,
)
TextField
TextField(
//鍵盤輸入方式
keyboardType: TextInputType.number,
decoration: InputDecoration(
//提示文字
hintText: "請輸入手機(jī)號",
//內(nèi)容邊距
contentPadding: EdgeInsets.all(10),
//提示文字樣式
hintStyle:
TextStyle(color: Colors.deepOrangeAccent, fontSize: 18),
//邊框
border: OutlineInputBorder(
//圓角
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(color: Colors.deepOrange),
),
),
//文字改變時調(diào)用
onChanged: (String content) {
print("content=" + content);
},
//光標(biāo)顏色
cursorColor: Colors.deepOrangeAccent,
//光標(biāo)圓角
cursorRadius: Radius.circular(4),
//光標(biāo)寬度
cursorWidth: 2,
)
布局型
Widget | 多個子Widget | 介紹 |
---|---|---|
Container | 否 | 默認(rèn)充滿,包含了padding、margin、color、寬高、decoration 等配置 |
Padding | 否 | 用于設(shè)置padding,對,你沒有猜錯,絕大部分Widget是沒有padding屬性的 |
Center | 否 | 用于居中顯示 |
Column | 是 | 垂直布局,類似于LinearLayout 的orientation="vertical" |
Row | 是 | 水平布局,類似于LinearLayout 的orientation="horizontal" |
Stack | 是 | 類似于relativeLayout 或者FrameLayout |
ListView | 是 | 類似于ListView或者RecyclerView |
Container
Padding
Column
Row
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ContainerDemo"),
),
body: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.only(left: 10, right: 20),
// color: Colors.orangeAccent,
decoration: new BoxDecoration(
//設(shè)置了decoration的color,就不能設(shè)置Container的color,否則會報錯
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
border: new Border.all(width: 10, color: Colors.blue)),
child: Column(
//Column 垂直方向,Row 水平方向
mainAxisAlignment: MainAxisAlignment.center,
//max相當(dāng)于match_parent,min相當(dāng)于wrap_content
mainAxisSize: MainAxisSize.max,
verticalDirection: VerticalDirection.up,
children: [
Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(20),
color: Colors.black54,
child: Text(
"1111111",
),
),
Text(
"111FFFFg",
style: TextStyle(
fontSize: 18,
backgroundColor: Colors.black54,
),
),
Text("222"),
Text("333"),
],
),
),
);
}
}
Stack
Stack 類似于relativeLayout 或者FrameLayout,有2種定位方式
1.alignment 作用于是全部的子Widget
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Stack(
textDirection: TextDirection.ltr,
//以整個組件的中心為坐標(biāo)原點(diǎn),x、y 偏移量取值范圍為 [-1,1],
// 如果 x 的偏移量大于 0,則表示向右偏移,小于 0 則向左偏移;
// 如果 y 軸的偏移量大于 0 則向下偏移,小于 0 則向上偏移。
// alignment: Alignment(0, 0),
//AlignmentDirectional.topStart:垂直靠頂部水平靠左對齊
//AlignmentDirectional.topCenter:垂直靠頂部水平居中對齊
//AlignmentDirectional.topEnd:垂直靠頂部水平靠右對齊
//AlignmentDirectional.centerStart:垂直居中水平靠左對齊
//AlignmentDirectional.center:垂直和水平居中都對齊
//AlignmentDirectional.centerEnd:垂直居中水平靠右對齊
//AlignmentDirectional.bottomStart:垂直靠底部水平靠左對齊
//AlignmentDirectional.bottomCenter:垂直靠底部水平居中對齊
//AlignmentDirectional.bottomEnd:垂直靠底部水平靠右對齊
alignment: AlignmentDirectional.centerEnd,
children: [
Container(
color: Colors.black54,
child: Text(
"1111111",
),
),
Text("111FFFFg",
style: TextStyle(fontSize: 18, backgroundColor: Colors.black54)),
Text("22222222")
],
),
);
}
}
2.Positioned 只能控制單個Widget,主要有left、right、top、bottom、width、height幾個屬性,分別表示距左、右、上、下的邊距,長度和寬度
注意:
1)left、right并存時,left生效;top、bottom并存時,top生效
2)left、right、width不能并存,top、bottom、height不能并存,會報錯
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Stack(
textDirection: TextDirection.ltr,
children: [
Container(
color: Colors.black54,
child: Text(
"1111111",
),
),
Positioned(
top: 100,
child: Text(
"111FFFFg",
style: TextStyle(
fontSize: 18,
backgroundColor: Colors.black54,
),
),
),
Positioned(
child: Text("22222222"),
right: 10,
top: 200,
)
],
),
);
}
}
ListView
主要有3種構(gòu)造方式 ListView.builder ListView.separated ListView.custom
1.ListView.builder
使用自帶的item --ListTile
class ListViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListViewDemo"),
centerTitle: true,
),
body: Container(
color: Colors.white,
child: ListView.builder(
//item
itemBuilder: (context, index) {
return ListTile(
//前置圖標(biāo)
leading: new Icon(Icons.list),
title: new Text("標(biāo)題"),
subtitle: new Text("副標(biāo)題"),
//后置圖標(biāo)
trailing: new Icon(Icons.arrow_forward_ios),
//內(nèi)容邊距
contentPadding: EdgeInsets.all(10),
);
},
//數(shù)量
itemCount: 10,
//內(nèi)容適配
shrinkWrap: true,
//內(nèi)邊距
padding: EdgeInsets.only(left: 10),
//是否倒敘
reverse: false,
//item 高度 讓item加載更加高效
itemExtent: 50,
//滑動方式
//AlwaysScrollableScrollPhysics() 總是可以滑動
//NeverScrollableScrollPhysics禁止?jié)L動
//BouncingScrollPhysics 內(nèi)容超過一屏 上拉有回彈效果
//ClampingScrollPhysics 包裹內(nèi)容 不會有回彈
physics: BouncingScrollPhysics(),
//預(yù)加載
cacheExtent: 10,
),
),
);
}
}
2.ListView.separated
相當(dāng)于原生中的多類型,核心是separatorBuilder,與itemBuilder是一同渲染的,可以用它來實(shí)現(xiàn)分割線
ListView.separated(
itemBuilder: (context, index) {
return ListTile(
//前置圖標(biāo)
leading: new Icon(Icons.list),
title: new Text("標(biāo)題"),
subtitle: new Text("副標(biāo)題"),
//后置圖標(biāo)
trailing: new Icon(Icons.arrow_forward_ios),
//內(nèi)容邊距
contentPadding: EdgeInsets.all(10),
);
},
separatorBuilder: (context, index) {
return Divider(
color: Colors.black45,
height: 10,
//左邊縮進(jìn)
indent: 50,
);
},
itemCount: 20,
)
3.ListView.custom
前2種方式是此方式的快捷方式,雖然不常用,但還是要了解下
ListView.custom(
childrenDelegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
//前置圖標(biāo)
leading: new Icon(Icons.list),
title: new Text("標(biāo)題 custom"),
subtitle: new Text("副標(biāo)題 custom"),
//后置圖標(biāo)
trailing: new Icon(Icons.arrow_forward_ios),
//內(nèi)容邊距
contentPadding: EdgeInsets.all(10),
);
}),
)
效果同方式1
示例模擬器上間隔線顯示有問題,真機(jī)正常
ListViewDemo相關(guān)代碼
class ListViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ListViewDemo"),
centerTitle: true,
),
body: Container(
color: Colors.white,
child: ListView.separated(
itemBuilder: ((context, index) {
return MoveItem();
}),
separatorBuilder: (context, index) {
return Divider(
color: Colors.black45,
height: 10,
);
},
itemCount: 10,
),
),
);
}
}
MoveItem相關(guān)代碼
class MoveItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(4),
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.network(
"http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg",
width: 100,
height: 150,
fit: BoxFit.fill,
),
),
Padding(
padding: EdgeInsets.only(left: 15),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"狄仁杰之四大天王",
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
Text("豆瓣評分6.6"),
Text("類型:動作、驚悚、冒險"),
Text("導(dǎo)演:徐克"),
Row(
children: [
Text("主演:"),
Padding(
padding: EdgeInsets.only(left: 10),
),
Container(
width: 40,
height: 40,
child: CircleAvatar(
backgroundImage: NetworkImage(
"http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
),
),
Container(
width: 40,
height: 40,
margin: EdgeInsets.only(left: 10),
child: CircleAvatar(
backgroundImage: NetworkImage(
"http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
),
),
Container(
width: 40,
height: 40,
margin: EdgeInsets.only(left: 10),
child: CircleAvatar(
backgroundImage: NetworkImage(
"http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg"),
),
),
],
),
],
),
],
),
);
}
}
你的認(rèn)可,是我堅持更新博客的動力,如果覺得有用,就請點(diǎn)個贊,謝謝
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/6782.html
摘要:月日,谷歌正式發(fā)布了的。到底能不能成為跨平臺開發(fā)終極之選是基于前端誕生的,但是對前端開發(fā)來說,的環(huán)境配置很麻煩,需要原生的平臺知識,還要擔(dān)心遇上網(wǎng)絡(luò)問題。現(xiàn)在已經(jīng)不是曾經(jīng)的小眾框架,這兩年里它已經(jīng)逐步成長為主流的跨平臺開發(fā)框架之一。 ...
摘要:頁面銷毀時,銷毀控制器在中聲明省略省略在中使用省略省略擴(kuò)展底部可以使用的屬性你的認(rèn)可,是我堅持更新博客的動力,如果覺得有用,就請點(diǎn)個贊,謝謝 前言 在上一篇中,我們了解了常用的Widget,這一篇,我們從實(shí)際案例出發(fā),來深入學(xué)習(xí)下Widget。 案例1 模擬登陸 先看效果圖 showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ad87615c...
摘要:注釋處的方法是程序的入口,使用了符號,這是中單行函數(shù)或方法的簡寫,等價于如下代碼方法是框架的入口,如果不返回方法,那么執(zhí)行的是一個控制臺應(yīng)用。 本文首發(fā)于微信公眾號「劉望舒」 前言 最近的Google I/O大會上,F(xiàn)lutter1.5 開始支持移動、Web、桌面和嵌入式設(shè)備,從不溫不火的sky一直進(jìn)化到如今熱門的Flutter,F(xiàn)lutter的發(fā)展已經(jīng)超出很多人的想象。我對跨平臺技術(shù)一...
摘要:與此同時,因新冠疫情的影響使得用戶對移動應(yīng)用程序的需求激增。調(diào)查報告顯示年移動應(yīng)用程序已經(jīng)產(chǎn)生了億美元的收入,預(yù)計到年將產(chǎn)生億美元的收入。 引言 計劃在2021年進(jìn)...
閱讀 2185·2021-09-02 15:11
閱讀 1507·2019-08-30 15:43
閱讀 2073·2019-08-29 13:48
閱讀 2790·2019-08-26 13:55
閱讀 2100·2019-08-23 15:09
閱讀 2896·2019-08-23 14:40
閱讀 3421·2019-08-23 14:23
閱讀 2632·2019-08-23 14:20