flutter 屬性記錄

昭光發表於2019-11-13
Flutter

start

flutter run
複製程式碼

終端熱鍵

  • r 鍵 點選後熱載入。
  • p 鍵 顯示網格，可看佈局情況。 很常用
  • o 鍵 切換android 和 ios 的預覽模式
  • q 鍵 退出除錯預覽模式

外掛

  • Flutter
  • Dart
  • Awesome Flutter Snippets

flutter msg

Flutter一切皆元件!

  • StatefulWidget: 具有可變狀態的視窗部件，也就是你在使用應用的時候就可以隨時變化，比如我們常見的進度條，隨著進度不斷變化。
  • StatelessWidget: 不可變狀態視窗元件， 也就是你在使用時不可以改變，比如固定的文字。

text widget 文字元件

屬性 屬性值 屬性描述 eg
TextAlign left center right start end 文字對齊方式 textAlign: TextAlign.start
maxLines 1 設定最多的行數 maxLines: 2
overflow clip ellipsis fade 文字截斷方式(切斷、打點、漸進消失) overflow: TextOverflow.ellipsis
style fontSize color decoration ... 設定文字樣式 style: TextStyle()

height: 該屬性用於指定行高，但它並不是一個絕對值，而是一個因子，具體的行高等於fontSize * height。
flutter 的fontSize 適配方案？

Container 容器元件

相當於html 的<div>標籤。
border 邊框使用container 容器下decoration 的border。

  child: Container(
    child: new Text('xxxxxx',style: TextStyle(fontSize: 40.0),),
    alignment: Alignment.topLeft,
    width: 400.0,
    height: 100.0,
    padding: const EdgeInsets.all(10.0),
    margin: const EdgeInsets.fromLTRB(0, 20.0, 20.0, 0),
    decoration:new BoxDecoration(
      border:Border.all(width:2.0,color:Colors.red)
    ),
  )
複製程式碼
屬性 屬性值 屬性描述 eg
Alignment bottomCenter bottomLeft bottomRight 等9個 針對容器內child（內容）的對齊方式 alignment: Alignment.topLeft
padding EdgeInsets.all(10.0) 設定padding EdgeInsets.fromLTRB(value1,value2,value3,value4)

還有對應的 width|height|color|margin 等

  • decoration 是container 的修飾器，主要功能是設定背景和邊框。

Image 圖片元件的使用

  • Image.asset 載入專案資源圖片，會增大打包體積，相對路徑
  • Image.network 網路資源圖片
  • Image.file & Image.memory 基本少用
屬性 屬性值 屬性描述 eg
fit full|contain|cover|fitWidth 等6個 拉伸與擠壓 fit: BoxFit.contain
  • fit屬性可以控制圖片的拉伸和擠壓？ 測試有誤

ListView 列表元件

new ListView(
  children:<Widget>[
    new ListTitle(
      leading: new Icon(Icons.access_time),
      title: new Text('access_time')
    ),
    ...
  ]
)

複製程式碼

動態列表用ListView.builder() 這種形式。

GridView 網格列表元件

網格列表經常用來顯示多張圖片。如相簿功能。

body: GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
    mainAxisSpacing: 2.0,
    crossAxisSpacing: 2.0,
    childAspectRatio: 0.7
  ),
  children: <Widget>[
    new Image.network(''),
    new Image.network(''),
    new Image.network(''),
    new Image.network(''),
  ]
)
複製程式碼

頁面佈局

水平佈局、垂直佈局、GridView佈局、ListView佈局、Container佈局等。

水平佈局Row

Row 控制元件分靈活排列和非靈活排列 非靈活排列形式：

body: new Row(
  children: <Widget>[
    new XXX,
    new XXX,
    new XXX,
  ]
)
複製程式碼

靈活排列。有間隙，使用Expanded 來解決。（佔滿空間）

body: new Row(
  children: <Widget>[
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
    Expanded(child: new XXXX),
  ]
)
複製程式碼

當然靈活排列與非靈活排列是可以混用的。

垂直佈局Column 元件

這裡也有主軸與側軸的區分。

body: Column(
  crossAxisAlignment: CrossAxisAlignment.start, // 文字對齊方式
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('line1 xxx'),
    Text('line1 xxx'),
    Text('line1 xxx')
  ]
)
複製程式碼

Stack 層疊佈局 （類似前端的定位）

tips: CircleAvatar 元件，裡頭有radius 的值可以設定弧度情況。

new CircleAvatar(
  backgroundImage: new NetworkImage('http://XXXX'),
  radius: 100.0,
)
複製程式碼

Stack 基本使用

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('技術胖'),
    )
  ],
);
複製程式碼

卡片佈局，類似ul => li

ListTile(
  title:new Text('XXXXXXXXXXXXX',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: new Text('aaa:1513938888'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
)
複製程式碼

頁面導航 （與前端導航和超連結有所不同）

RaisedButton 按鈕元件 （用的比較多）

它有兩個最基本屬性：

  • child: 可以放入容器，圖示，文字。這樣可以構建多彩的按鈕。
  • onPressed 點選事件，此時會呼叫Navigator 元件。
child: RaisedButton(
  child: Text('檢視商品詳情頁面'),
  onPressed: (){
    Navigator.push(context, new MaterialPageRoute(
      builder: (context) => XXXX
    ));
  },
)
複製程式碼

Navigator.push 和 Navigator.pop

  • push： 是跳轉下一個頁面，接收兩個引數,上下文context & 跳轉函式
  • pop: 返回上一個頁面，使用時傳遞一個context（上下文）引數，使用時要注意的是，你必須是有上級頁面的，也就是說上級頁面使用了Navigator.push。

引數傳遞

靜態資源和專案圖片處理

1、先pubspec.yaml 檔案進行宣告。

assets:
  - images/blogtouxiang.jpg
複製程式碼

2、專案中直接使用

Widget build(BuildContext context) {
  return Container(
    child: Image.asset('images/blogtouxiang.jpg'),
  );
}
複製程式碼

相關文章