Flutter入門（一）
- 2019 年 12 月 27 日
- 筆記
Flutter的sdk地址https://flutter.dev/docs/development/tools/sdk/releases
如果網路不能翻牆，只需要在環境變數里增加如下
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn PUB_HOSTED_URL: https://pub.flutter-io.cn
使用Android Studio安裝好Flutter插件後，新建flutter工程後還要在當前窗口重新導入下面的android目錄
如果編譯過程中報錯Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierImpl.getModuleIdentifier()，就是gradle版本過高或as版本過低導致的
第一次編譯沒有成功，把工程刪掉新建一個，又可以了
如果用vscode運行flutter工程，在終端運行flutter run命令，r鍵是熱載入;p鍵顯示網格；o鍵切換android和ios模式；q鍵退出調試模式
註：
下面每個demo的啟動程式碼都一樣
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Demo')), body: HomeContent(), ), theme: ThemeData(primaryColor: Colors.yellow), ); } }下面每個demo只貼上HomeContent的內容
* demo1
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Text( '你好 Flutter', textDirection: TextDirection.ltr, style: TextStyle(fontSize: 40.0, color: Colors.yellow), ), ); } }效果圖
* demo2
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Container( child: Text( '我是一個文本我是一個文本我是一個文本我是一個文本我是一個文本我是一個文本我是一個文本', textAlign: TextAlign.left, overflow: TextOverflow.ellipsis, maxLines: 2, textScaleFactor: 2, style: TextStyle( fontSize: 16.0, color: Colors.red, fontWeight: FontWeight.w800, fontStyle: FontStyle.italic, decoration: TextDecoration.lineThrough, decorationColor: Colors.white, decorationStyle: TextDecorationStyle.dashed, letterSpacing: 2.0), ), height: 300.0, width: 300.0, decoration: BoxDecoration( color: Colors.yellow, border: Border.all( color: Colors.blue, width: 2.0, ), borderRadius: BorderRadius.all(Radius.circular(8.0))), padding: EdgeInsets.fromLTRB(10, 30, 5, 0), margin: EdgeInsets.all(20), // transform: Matrix4.rotationZ(-0.3), // alignment: Alignment.bottomCenter, ), ); } }效果圖
* 圖片demo
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Container( child: Image.network( 'http://a.hiphotos.baidu.com/image/pic/item/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg', alignment: Alignment.topCenter, color: Colors.blue, colorBlendMode: BlendMode.screen, //混合顏色 fit: BoxFit.fill, //一般用cover ), width: 300, height: 300, decoration: BoxDecoration( color: Colors.yellow, ), ), ); } }效果圖
* 圓形圖片
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Container( child: ClipOval( child: Image.network( "http://a.hiphotos.baidu.com/image/pic/item/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg", width: 300, height: 300, fit: BoxFit.cover, ), ), ), ); } }效果圖
* 載入本地圖片有點複雜
首先增加本地圖片
配置pubspec.yaml
flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true assets: - images/001.jpg - images/2.0x/001.jpg - images/3.0x/001.jpg - images/4.0x/001.jpg
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Container( child: Image.asset( "images/001.jpg", fit: BoxFit.cover, ), width: 300, height: 300, decoration: BoxDecoration( color: Colors.yellow, ), ), ); } }效果圖
* 列表
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return ListView( padding: EdgeInsets.all(10), children: <Widget>[ ListTile( leading: Image.network("https://www.itying.com/images/flutter/1.png"), title: Text('標題1'), subtitle: Text('二級標題'), trailing: Icon( Icons.settings, color: Colors.yellow, size: 40, ), ), ListTile( leading: Image.network("https://www.itying.com/images/flutter/2.png"), title: Text('標題2'), subtitle: Text('二級標題'), trailing: Icon( Icons.settings, color: Colors.yellow, size: 40, ), ), ListTile( leading: Image.network("https://www.itying.com/images/flutter/3.png"), title: Text('標題3'), subtitle: Text('二級標題'), trailing: Icon( Icons.settings, color: Colors.yellow, size: 40, ), ), ], ); } }效果圖
Container相當於JS的div，可以多層嵌套
* 動態列表
class HomeContent extends StatelessWidget { //自定義方法 List<Widget> _getData() { List<Widget> list = new List(); for (var i = 0; i < 20; i++) { list.add(ListTile(title: Text("我是$i列表"))); } return list.toList(); } @override Widget build(BuildContext context) { // TODO: implement build return ListView( children: this._getData(), ); } }效果圖
* 動態列表2
listData.dart
List listData = [ { "title": 'one', "author": 'one', "imageUrl": 'https://www.itying.com/images/flutter/1.png', }, { "title": 'two', "author": 'two', "imageUrl": 'https://www.itying.com/images/flutter/2.png', }, { "title": 'three', "author": 'three', "imageUrl": 'https://www.itying.com/images/flutter/3.png', }, { "title": 'four', "author": 'four', "imageUrl": 'https://www.itying.com/images/flutter/4.png', }, ];import 'res/listData.dart'; class HomeContent extends StatelessWidget { //自定義方法 List<Widget> _getData() { var tempList = listData.map((value) { return ListTile( leading: Image.network(value["imageUrl"]), title: Text(value["title"]), subtitle: Text(value["author"]), ); }); return tempList.toList(); } @override Widget build(BuildContext context) { // TODO: implement build return ListView( children: this._getData(), ); } }效果圖
* 類似android的adapter
class HomeContent extends StatelessWidget { List list = new List(); HomeContent() { for (var i = 0; i < 20; i++) { this.list.add("我是第$i條數據"); } } @override Widget build(BuildContext context) { // TODO: implement build return ListView.builder( itemCount: this.list.length, itemBuilder: (context, index) { return ListTile( title: Text(this.list[index]), ); }, ); } }優化
import 'res/listData.dart'; class HomeContent extends StatelessWidget { Widget _getListData(context, index) { return ListTile( leading: Image.network(listData[index]["imageUrl"]), title: Text(listData[index]["title"]), subtitle: Text(listData[index]["author"]), ); } @override Widget build(BuildContext context) { // TODO: implement build return ListView.builder( itemCount: listData.length, itemBuilder: this._getListData); } }歡迎關注我的微信公眾號：Android圈
