flutter筆記1
一.Text
1.TextAlign
// 對齊 child:Text( '很是喜歡前端，而且願意爲此奮鬥一輩子。我但願能夠出1000集免費教程。', textAlign:TextAlign.left, ) /** textAlign:TextAlign.left * center: 文本以居中形式對齊,這個也算比較經常使用的了。 * left:左對齊，常用，讓文本居左進行對齊，效果和start同樣。 * right :右對齊，使用頻率也不算高。 * start:以開始位置進行對齊，相似於左對齊。 * end: 覺得本結尾處進行對齊，不經常使用。有點相似右對齊 */
2.maxLines
設置最多顯示的行數，好比咱們如今只顯示1行
child:Text( '很是喜歡前端，而且願意爲此奮鬥一輩子。我但願能夠出1000集免費教程。', textAlign:TextAlign.left, maxLines: 1, )
3.overflow
overflow屬性是用來設置文本溢出時，如何處理
child:Text( '很是喜歡前端，而且願意爲此奮鬥一輩子。我但願能夠出1000集免費教程。', textAlign:TextAlign.left, overflow: clip, ) /* * clip：直接切斷，剩下的文字就沒有了 * ellipsis:在後邊顯示省略號，體驗性較好 * fade: 溢出的部分會進行一個漸變消失的效果 * * */
4.style
style屬性較多
child:Text(
'很是喜歡前端，而且願意爲此奮鬥一輩子。我但願能夠出1000集免費教程。',
textAlign:TextAlign.left,
overflow:TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
fontSize:25.0,
color:Color.fromARGB(255, 255, 150, 150),
decoration:TextDecoration.underline,
decorationStyle:TextDecorationStyle.solid,
),
)
/*
inherit: true, // 爲false的時候不顯示
color: Color.fromARGB(255, 150, 150, 150), // 顏色
fontSize :22.0, // 字號
fontWeight: FontWeight.w700, // 字重，加粗也用這個字段 FontWeight.w700
fontStyle: FontStyle.italic , // FontStyle.normal FontStyle.italic斜體
letterSpacing: 10.0, // 字符間距 就是單個字母或者漢字之間的間隔，能夠是負數
wordSpacing: 15.0, // 字間距 句字之間的間距
textBaseline: TextBaseline.alphabetic, // 基線，兩個值，字面意思是一個用來排字母的，一人用來排表意字的（相似中文）
textBaseline: TextBaseline.ideographic
height: 1.0, // 當用來Text控件上時，行高（會乘以fontSize,因此不以設置過大）
decoration: TextDecoration.overline, // 添加上劃線
decoration: TextDecoration.lineThrough, // 添加刪除線
decoration: TextDecoration.underline, // 添加下劃線
decorationColor, // 劃線的顏色
decorationStyle: TextDecorationStyle.dotted, // 這個style可能控制畫實線，虛線，兩條線，點, 波浪線等
debugLabel,
background: //文本背景色
String fontFamily, // 字體
String package,
*/
二.Container容器組件
Container（容器控件）在Flutter是常用的控件，它就至關於咱們HTML裏的<div>標籤
1.padding屬性
padding的屬性就是一個內邊距
child:Container(
child:new Text('Container容器組件',
style: TextStyle(fontSize: 40.0)
),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
color: Colors.lightBlue,
padding:const EdgeInsets.all(10.0),
)
padding:const EdgeInsets.all(10.0),
設置Container的內邊距是10，左右上下所有爲10
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0)
能夠知足咱們分別設置上下左右，LTRB分別表明左、上、右、下
2.margin屬性
child:Container(
child:new Text('Hello JSPang',
style: TextStyle(fontSize: 40.0)
),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
color: Colors.lightBlue,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
)
3.decoration屬性
decoration是 container 的修飾器，主要的功能是設置背景和邊框
好比你須要給背景加入一個漸變，和邊框 這時候須要使用BoxDecoration這個類
注意:
須要注意的是若是你設置了decoration，就不要再設置color屬性了，由於這樣會衝突
child:Container(
child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border:Border.all(width:2.0,color:Colors.red)
)
)
三.Image圖片組件的使用
1.加入圖片的幾種方式
1.Image.asset:加載資源圖片，就是加載項目資源目錄中的圖片,加入圖片後會增大打包的包體體積，用的是相對路徑。
2.Image.network:網絡資源圖片，意思就是你須要加入一段http://xxxx.xxx的這樣的網絡路...。
3.Image.file:加載本地圖片，就是加載本地文件中的圖片，這個是一個絕對路徑，跟包體無關。
4.Image.memory: 加載Uint8List資源圖片前端
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
child:new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
scale:1.0,
),
width:300.0,
height:200.0,
color: Colors.lightBlue,
),
),
),
);
}
}
2.fit屬性的設置
fit屬性能夠控制圖片的拉伸和擠壓，這些都是根據圖片的父級容器來的，咱們先來看看這些屬性（建議此部分組好看視頻理解）。vue
BoxFit.fill:全圖顯示，圖片會被拉伸，並充滿父容器。
BoxFit.contain:全圖顯示，顯示原比例，可能會有空隙。
BoxFit.cover：顯示可能拉伸，可能裁切，充滿（圖片要充滿整個容器，還不變形）。
BoxFit.fitWidth：寬度充滿（橫向充滿），顯示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充滿（豎向充滿）,顯示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和contain差很少，可是此屬性不容許顯示超過源圖片大小，可小不可大node
child:Container(
child:new Image.network(
'http://img.nodebook.top/nodebooklogo.jpg',
scale:1.0,
fit: BoxFit.fill
),
width:300.0,
height:200.0,
color: Colors.lightBlue,
)
3.圖片的混合模式
child:new Image.network(
'http://jspang.com/static/myimg/blogtouxiang.jpg',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
)
color：是要混合的顏色，若是你只設置color是沒有意義的
colorBlendMode:是混合模式，至關於咱們如何混合。
4.repeat圖片重複
ImageRepeat.repeat : 橫向和縱向都進行重複，直到鋪滿整個畫布。web
ImageRepeat.repeatX: 橫向重複，縱向不重複。typescript
ImageRepeat.repeatY：縱向重複，橫向不重複數組
child:new Image.network( 'http://jspang.com/static/myimg/blogtouxiang.jpg', repeat: ImageRepeat.repeat, ),
四.ListView 列表組件簡介
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title:'JSPang Flutter Demo',
home:Scaffold(
appBar:new AppBar(
title:new Text('ListView Widget')
),
body: new ListView(
children:<Widget>[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.account_balance),
title:new Text('account_balance')
),
]
)
),
);
}
}
1.兩行列表
body: new ListView(
children:<Widget>[
new ListTile(
leading:new Icon(Icons.access_time),
title:new Text('access_time')
),
new ListTile(
leading:new Icon(Icons.account_balance),
title:new Text('account_balance')
),
]
),
---
2.圖片
body: new ListView(
children:<Widget>[
new Image.network(
'http://jspang.com/static/upload/20181111/G-wj-ZQuocWlYOHM6MT2Hbh5.jpg'
),
new Image.network(
'http://jspang.com/static/upload/20181109/1bHNoNGpZjyriCNcvqdKo3s6.jpg'
),
new Image.network(
'http://jspang.com/static/myimg/typescript_banner.jpg'
),
new Image.network(
'http://jspang.com/static/myimg/smile-vue.jpg'
)
]
),
五.橫向列表的使用
其實仍是使用咱們的ListView組件，只是在ListView組件里加一個ScrollDirection屬性。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
height:200.0,
child:new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width:180.0,
color: Colors.lightBlue,
), new Container(
width:180.0,
color: Colors.amber,
), new Container(
width:180.0,
color: Colors.deepOrange,
),new Container(
width:180.0,
color: Colors.deepPurpleAccent,
),
],
)
),
),
),
);
}
}
1.scrollDirection屬性
ListView組件的scrollDirection屬性只有兩個值，一個是橫向滾動，一個是縱向滾動。默認的就是垂直滾動，因此若是是垂直滾動，咱們通常都不進行設置。網絡
Axis.horizontal:橫向滾動或者叫水平方向滾動。app
Axis.vertical:縱向滾動或者叫垂直方向滾動
組件化
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:Center(
child:Container(
height:200.0,
child:MyList() // => 組件化
),
),
),
);
}
}
// MyList
class MyList extends StatelessWidget{
@override
Widget build(BuildContext context){
return ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width:180.0,
color: Colors.lightBlue,
), new Container(
width:180.0,
color: Colors.amber,
), new Container(
width:180.0,
color: Colors.deepOrange,
),new Container(
width:180.0,
color: Colors.deepPurpleAccent,
),
],
);
}
}
六.動態列表的使用
List類型的使用
List是Dart的集合類型之一,其實你能夠把它簡單理解爲數組（反正我是這麼認爲的) , 它的聲明有幾種方式：less
var myList = List(): 非固定長度的聲明。
var myList = List(2): 固定長度的聲明。
var myList= List<String>():固定類型的聲明方式。
var myList = [1,2,3]: 對List直接賦值。jsp
void main () => runApp(MyApp( items: new List<String>.generate(1000, (i)=> "Item $i") ));
generate方法傳遞兩個參數，第一個參數是生成的個數，第二個是方法
import 'package:flutter/material.dart';
void main () => runApp(MyApp(
items: new List<String>.generate(1000, (i)=> "Item $i")
));
class MyApp extends StatelessWidget{
final List<String> items;
MyApp({Key key, @required this.items}):super(key:key);
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:new ListView.builder(
itemCount:items.length,
itemBuilder:(context,index){
return new ListTile(
title:new Text('${items[index]}'),
);
}
)
),
);
}
}
七.GridView網格列表組件
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:GridView.count(
padding:const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: <Widget>[
const Text('I am Jspang'),
const Text('I love Web'),
const Text('jspang.com'),
const Text('我喜歡玩遊戲'),
const Text('我喜歡看書'),
const Text('我喜歡吃火鍋')
],
)
),
);
}
}
padding:表示內邊距，這個小夥伴們應該很熟悉。
crossAxisSpacing:網格間的空當，至關於每一個網格之間的間距。
crossAxisCount:網格的列數，至關於一行放置的網格數量。
2.加入圖片
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
childAspectRatio: 0.7
),
children: <Widget>[
new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
],
)
),
);
}
}
childAspectRatio:寬高比，這個值的意思是寬是高的多少倍，若是寬是高的2倍，那咱們就寫2.0，若是高是寬的2倍，咱們就寫0.5
一.水平佈局Row的使用
Flutter中的row控件就是水平控件，它可讓Row裏邊的子元素進行水平排列
Row控件能夠分爲靈活排列和非靈活排列兩種
1.不靈水平佈局
從字面上就能夠理解到，不靈活就是根據Row子元素的大小，進行佈局。若是子元素不足，它會留有空隙，若是子元素超出，它會警告。
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('水平方向佈局'),
),
body:new Row(
children: <Widget>[
new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('紅色按鈕')
),
new RaisedButton(
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黃色按鈕'),
),
new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按鈕')
)
],
)
),
);
}
}
這時候你會發現的頁面已經有了三個按鈕，但這三個按鈕並無充滿一行，而是出現了空隙。這就是不靈活橫向排列形成的。它根據子元素的大小來進行排列。若是咱們想實現充滿一行的效果，就要使用靈活水平佈局了
2.靈活水平佈局
在按鈕的外邊加入Expanded就能夠了
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('水平方向佈局'),
),
body:new Row(
children: <Widget>[
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('紅色按鈕')
)),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黃色按鈕'),
)
),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按鈕')
)
)
],
)
),
);
}
}
3.靈活和不靈活的混用
中間的按鈕大，而兩邊的按鈕保持真實大小
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('水平方向佈局'),
),
body:new Row(
children: <Widget>[
new RaisedButton(
onPressed: (){
},
color:Colors.redAccent,
child:new Text('紅色按鈕')
),
Expanded(child:new RaisedButton(
onPressed: (){
},
color:Colors.orangeAccent,
child: new Text('黃色按鈕'),
)
),
new RaisedButton(
onPressed: (){
},
color:Colors.pinkAccent,
child:new Text('粉色按鈕')
)
],
)
),
);
}
}
二.垂直佈局Column組件
1.三行文字佈局
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向佈局'),
),
body:Column(
children: <Widget>[
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
crossAxisAlignment: CrossAxisAlignment.start
)
),
);
}
}
CrossAxisAlignment.star：居左對齊。
CrossAxisAlignment.end：居右對齊。
CrossAxisAlignment.center：居中對齊。
2.主軸和副軸的辨識
mainAxisAlignment 主軸的對齊方式
main軸：若是你用column組件，那垂直就是主軸，若是你用Row組件，那水平就是主軸。
cross軸：cross軸咱們稱爲幅軸，是和主軸垂直的方向。好比Row組件，那垂直就是幅軸，Column組件的幅軸就是水平方向的
1.垂直居中
mainAxisAlignment: MainAxisAlignment.center
3.水平方向相對屏幕居中
讓文字相對於水平方向居中，咱們如何處理？其實只要加入Center組件就能夠輕鬆解決
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向佈局'),
),
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child:Text('I am JSPang')),
Center(child:Text('my website is jspang.com')),
Center(child:Text('I love coding'))
],
)
),
);
}
}
4.Expanded屬性的使用
在學習水平佈局的時候咱們對Expanded有了深入的理解，它就是靈活佈局。好比咱們想讓中間區域變大，而頭部區域和底部根據文字所佔空間進行顯示
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child:Text('I am JSPang')),
Expanded(child:Center(child:Text('my website is jspang.com'))),
Center(child:Text('I love coding'))
],
)
三.Stack層疊佈局
1.層疊佈局的 alignment 屬性
alignment屬性是控制層疊的位置的，建議在兩個內容進行層疊時使用。它有兩個值X軸距離和Y軸距離，值是從0到1的，都是從上層容器的左上角開始算起的
2.CircleAvatar組件的使用
CircleAvatar這個常常用來做頭像的，組件裏邊有個radius的值能夠設置圖片的弧度
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
)
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var stack = new Stack(
alignment: const FractionalOffset(0, 0.1),
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.lightBlue,
),
padding: EdgeInsets.all(5.0),
child: new Text('JSPang 技術胖'),
)
],
);
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向佈局'),
),
body:Center(child:stack),
),
);
}
}
四.Stack的Positioned屬性
若是是超過兩個組件的層疊該如何進行定位那?這就是咱們加今天要學的主角Positioned組件了。這個組件也叫作層疊定位組件
Positioned組件的屬性
bottom: 距離層疊組件下邊的距離
left：距離層疊組件左邊的距離
top：距離層疊組件上邊的距離
right：距離層疊組件右邊的距離
width: 層疊定位組件的寬度
height: 層疊定位組件的高度
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var stack = new Stack(
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
radius: 100.0,
),
new Positioned(
top:10.0,
left:10.0,
child: new Text('JSPang.com'),
),
new Positioned(
bottom:10.0,
right:10.0,
child: new Text('技術胖'),
)
],
);
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('層疊佈局'),
),
body:Center(child:stack),
),
);
}
}
五.卡片組件佈局
Flutter還有一種比較比較酷炫的佈局方式:卡片式佈局。這種佈局相似ViewList，可是列表會以物理卡片的形態進行展現
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
var card = new Card(
child: Column(
children: <Widget>[
ListTile(
title:new Text('吉林省吉林市昌邑區',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('技術胖:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
ListTile(
title:new Text('北京市海淀區中國科技大學',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('勝宏宇:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
ListTile(
title:new Text('河南省濮陽市百姓辦公樓',style: TextStyle(fontWeight: FontWeight.w500),),
subtitle: new Text('JSPang:1513938888'),
leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
),
new Divider(),
],
),
);
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('卡片佈局'),
),
body:Center(child:card),
),
);
}
}
通常導航組件
1.RaisedButtom 按鈕組件
它有兩個最基本的屬性：
child：能夠放入容器，圖標，文字。讓你構建多彩的按鈕。 onPressed：點擊事件的相應，通常會調用Navigator組件
咱們在做頁面導航時，大量的使用了RaisedButton組件，這個組件的使用在實際工做中用的也比較多
2.Navigator.push 和 Navigator.pop
1.Navigator.push：是跳轉到下一個頁面，它要接受兩個參數一個是上下文context，另外一個是要跳轉
2.Navigator.pop：是返回到上一個頁面，使用時傳遞一個context（上下文）參數，使用時要注意的是，你必須是有上級頁面的，也就是說上級頁面使用了Navigator.push。
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
title:'導航演示1',
home:new MyApp()
));
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return new Scaffold(
appBar: AppBar(title:Text('導航頁面')),
body:Center(
child:RaisedButton(
child:Text('查看商品詳情頁面'),
onPressed: (){
Navigator.push(context,new MaterialPageRoute(
builder:(context) =>new SecondScreen())
);
},
)
)
);
}
}
class SecondScreen extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
appBar:AppBar(title:Text('技術胖商品詳情頁')),
body:Center(
child:RaisedButton(
child:Text('返回'),
onPressed: (){
Navigator.pop(context);
},
))
);
}
}
# Center組件
import 'package:flutter/material.dart';
void main(){
runApp(new Center( //Center組件
child: Text(
"文本內容",
textDirection: TextDirection.ltr
)
))
}
# 自定義組件
StatelessWidget //無狀態組件
StatefulWidget //有狀態組件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center( //Center組件
child: Text(
"文本內容",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
color: Color.fromRGBO(255,0,0,0.5)
)
)
)
}
}
# MaterialApp 和 Scaffold > MaterialApp是一個方便的Widget,它封裝了應用程序實現 Material Desigin 所須要的一些Widget 通常做爲頂層Widget組件 ### 經常使用屬性 home(主頁) title(標題) color(顏色) theme(主題) routes(路由) ### Scaffold組件 > Scaffold 是 Material Desigin 佈局結構的基本實現 ### Scaffold組件屬性 appBar 顯示在界面頂部的一個 appBar body 當前界面所顯示的主要 內飾 Widget drawer 抽屜菜單控件
import 'package:flutter/material.dart';
void main(){
runApp(MaterialApp(
title:'導航演示1', home:new MyApp(), theme:ThemeData( primarySwatch: Colors.yellow )
));
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return new Scaffold(
appBar: AppBar(title:Text('導航頁面')),
body:Center(
child:RaisedButton(
child:Text('查看商品詳情頁面'),
onPressed: (){
Navigator.push(context,new MaterialPageRoute(
builder:(context) =>new SecondScreen())
);
},
)
)
);
}
}
class SecondScreen extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
appBar:AppBar(title:Text('技術胖商品詳情頁')),
body:Center(
child:RaisedButton(
child:Text('返回'),
onPressed: (){
Navigator.pop(context);
},
))
);
}}
相關文章
- 1. Flutter筆記（1）AppBar
- 2. Flutter學習筆記(1)
- 3. Flutter 學習筆記1
- 4. Flutter學習筆記（1）--環境安裝
- 5. Flutter 筆記 pubspec
- 6. Flutter筆記（二）
- 7. Flutter筆記（二）：Flutter基礎
- 8. Flutter學習筆記
- 9. flutter學習筆記
- 10. flutter筆記導圖
- 更多相關文章...
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • ADO 添加記錄 - ADO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Flutter筆記（1）AppBar
- 2. Flutter學習筆記(1)
- 3. Flutter 學習筆記1
- 4. Flutter學習筆記（1）--環境安裝
- 5. Flutter 筆記 pubspec
- 6. Flutter筆記（二）
- 7. Flutter筆記（二）：Flutter基礎
- 8. Flutter學習筆記
- 9. flutter學習筆記
- 10. flutter筆記導圖