Flutter入門四：搭建項(xiàng)目菲宴、資源調(diào)用、簡單開發(fā)

Flutter入門學(xué)習(xí)大綱

上一節(jié)趋急，我們熟悉了自動(dòng)布局（Row/Column/Stack）與兩種Widget
本節(jié)喝峦，我們開始搭建一個(gè)仿微信界面的項(xiàng)目。后續(xù)文章呜达，都圍繞這個(gè)項(xiàng)目進(jìn)行講述谣蠢。

搭建項(xiàng)目
啟動(dòng)頁、Icon和本地資源讀取
開發(fā)發(fā)現(xiàn)頁

1. 新建項(xiàng)目`wechat_demo`

搭建項(xiàng)目可參考項(xiàng)目創(chuàng)建

清空main.dart中的文件查近，編寫代碼：

highlightColor: 去除高光（alpha設(shè)置0）

splashColor：去除水波紋（alpha設(shè)置0）

import 'package:flutter/material.dart';
import 'package:wechat_demo/root_page.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wechat Demo', // 安卓需要眉踱，后臺(tái)切換app時(shí)展示的名稱（iOS中名稱與APP名稱一致）
      debugShowCheckedModeBanner: false, // 隱藏debug角標(biāo)
      home: RootPage(),
      theme: ThemeData(
        primaryColor: Colors.blue, // 主題色
        highlightColor: Color.fromRGBO(0, 0, 0, 0), // 去除高亮色
        splashColor: Color.fromRGBO(0, 0, 0, 0), // 去除水波紋
      ),
    );
  }
}

新建root_page.dart文件，創(chuàng)建根視圖RootPage(可變部件)霜威，

State中創(chuàng)建bodys部件數(shù)組谈喳，存放每個(gè)主欄目部件,每個(gè)主欄目部件都是StatefulWidget可變組件，內(nèi)部都是Scaffold部件戈泼。

State中創(chuàng)建items部件數(shù)組(固定不變婿禽，使用final修飾)，存放每個(gè)欄目底部的Item

State中創(chuàng)建_currentIndexInt變量矮冬，記錄當(dāng)前選擇的tabbar Index谈宛。

Scaffold設(shè)置bottomNavigationBar，type設(shè)置為BottomNavigationBarType.fixed才可以顯示樣式胎署。設(shè)置fixedColor固定顏色為green吆录，設(shè)置onTap點(diǎn)擊回調(diào)事件。

Scaffold設(shè)置selectedFontSize為12琼牧，是因?yàn)?code>默認(rèn)未選中大小是12恢筝，這樣可以去掉字體變大動(dòng)畫）

import 'package:flutter/material.dart';
import 'package:wechat_demo/chat_page.dart';
import 'package:wechat_demo/discover_page.dart';
import 'package:wechat_demo/friends_page.dart';
import 'package:wechat_demo/mine_page.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {

  Widget onTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  // 每個(gè)欄目的主頁面
  List<Widget> bodys = [ChatPage(), FriendsPage(), DiscoverPage(), MinePage()];

  // 每個(gè)欄目的底部Item
  final List<BottomNavigationBarItem> items = [BottomNavigationBarItem(icon: Icon(Icons.chat), label: "聊天"),
    BottomNavigationBarItem(icon: Icon(Icons.bookmark), label: "通訊錄"),
    BottomNavigationBarItem(icon: Icon(Icons.bookmark), label: "朋友圈"),
    BottomNavigationBarItem(icon: Icon(Icons.history), label: "我的")];

  // 當(dāng)前選中Index
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(
        child: bodys[_currentIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed, // 固定大小，避免白色背景
        fixedColor: Colors.green, // 固定顏色
        currentIndex: _currentIndex, // 選擇的默認(rèn)值
        items: items,
        onTap: onTap, // 點(diǎn)擊回調(diào)
        selectedFontSize: 12, // 選擇字體大小設(shè)置為12（因?yàn)槟J(rèn)大小是12巨坊，這樣可以去掉變大動(dòng)畫）
        // selectedLabelStyle: ,
      ),
    );
  }
}

其中 ChatPage聊天主頁內(nèi)容為：(其他三個(gè)板塊撬槽，目前只是更改了title和body的文字內(nèi)容)

import 'package:flutter/material.dart';

class ChatPage extends StatefulWidget {
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("聊天"),
      ),
      body: Center(child: Text("聊天頁面")),
    );
  }
}

展示樣式

image.png

2. `啟動(dòng)頁`、`Icon`和`本地資源讀取`

跨平臺(tái)項(xiàng)目中趾撵，APP啟動(dòng)頁和Icon的設(shè)置侄柔，都需要原生進(jìn)行支持共啃。

本節(jié)圖片資源鏈接：https://pan.baidu.com/s/1l9VYCRvBt_3phJL6XlPUfw 密碼: p8wd

2.1 安卓啟動(dòng)頁

使用Android Studio打開項(xiàng)目，在anroid->app->src->main->res文件夾下暂题，存放資源和配置文件移剪。
安卓圖片資源，對應(yīng)1倍圖薪者、1.5倍圖纵苛、2倍圖、3倍圖言津、4倍圖

image.png

2.1.1 設(shè)置Icon圖標(biāo)

將兩倍圖和三倍圖分別復(fù)制粘貼到xhdpi和xxhdpi圖片文件夾中攻人，都命名為app_icon.png。
修改配置文件中的app名稱和app圖標(biāo)

image.png

2.1.2 設(shè)置啟動(dòng)頁

將啟動(dòng)圖粘貼到mdpi文件夾悬槽，修改drawable文件夾下的lauch_background.xml文件

image.png

2.1.3 運(yùn)行安卓模擬器

開啟并選擇安卓模擬器怀吻，debug運(yùn)行，可以看到Icon圖標(biāo)和appLauch都已生效：

image.png

安卓導(dǎo)航欄標(biāo)題默認(rèn)靠左:
設(shè)置AppBar的centerTitle屬性為true,將標(biāo)題居中

image.png

2.2 iOS啟動(dòng)頁

使用XCode打開iOS項(xiàng)目:

image.png

2.2.1 設(shè)置Icon圖標(biāo)

iOS的Icon尺寸要求多陷谱，我們可以借助IconKit工具(工具下載地址)一鍵生成烙博。

image.png

生成各尺寸圖

image.png

image.png
在Xcode工程中，Assets.xcassets文件夾AppIcon設(shè)置各尺寸圖標(biāo)：

image.png

2.2.2 設(shè)置啟動(dòng)頁

將lauch_image.jpeg圖片拖入與LaunchScreen.storyboard文件相同目錄下（保證每次加載都會(huì)及時(shí)更新）烟逊，在LaunchScreen.storyboard中渣窜，指定啟動(dòng)圖片為lauch_image.jpeg:

image.png

2.2.3 運(yùn)行iPhone模擬器

選中并運(yùn)行模擬器，啟動(dòng)頁和icon圖標(biāo)都已生效:

image.png

至此,iOS和安卓的啟動(dòng)圖和Icon都已設(shè)置完畢

下面宪躯，使用Android Studio編碼乔宿，加載iOS和安卓共用的本地圖片

2.3 Android Studio 本地圖片

Flutter跨端使用本地圖片步驟：

圖片加入images文件夾

聲明圖片位置

AssetImage使用圖片

2.3.1 圖片加入images文件夾

將images圖片復(fù)制粘貼到項(xiàng)目根目錄下，在pubspec.yaml配置文件中访雪，放開assets注釋详瑞，將所有使用到的image圖片路徑進(jìn)行聲明：

image.png

2.3.2 聲明`圖片位置`

聲明圖片位置：

image.png

2.3.3 AssetImage使用圖片

我們將BottomNavigationBarItem的圖片修改為我們的本地圖片

import 'package:flutter/material.dart';
import 'package:wechat_demo/chat_page.dart';
import 'package:wechat_demo/discover_page.dart';
import 'package:wechat_demo/friends_page.dart';
import 'package:wechat_demo/mine_page.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  Widget onTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  // 每個(gè)欄目的主頁面
  List<Widget> bodys = [ChatPage(), FriendsPage(), DiscoverPage(), MinePage()];

  // 每個(gè)欄目的底部Item(使用AssetImage加載本地圖片)
  final List<BottomNavigationBarItem> items = [
    BottomNavigationBarItem(
        icon: Image(image: AssetImage('images/tabbar_chat.png'), width: 20),
        activeIcon:
            Image(image: AssetImage('images/tabbar_chat_hl.png'), width: 20),
        label: "聊天"),
    BottomNavigationBarItem(
        icon: Image(image: AssetImage('images/tabbar_friends.png'), width: 20),
        activeIcon:
            Image(image: AssetImage('images/tabbar_friends_hl.png'), width: 20),
        label: "通訊錄"),
    BottomNavigationBarItem(
        icon: Image(image: AssetImage('images/tabbar_discover.png'), width: 20),
        activeIcon: Image(
            image: AssetImage('images/tabbar_discover_hl.png'), width: 20),
        label: "朋友圈"),
    BottomNavigationBarItem(
        icon: Image(image: AssetImage('images/tabbar_mine.png'), width: 20),
        activeIcon:
            Image(image: AssetImage('images/tabbar_mine_hl.png'), width: 20),
        label: "我的")
  ];

  // 當(dāng)前選中Index
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(
        child: bodys[_currentIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        // 固定大小，避免白色背景
        fixedColor: Colors.green,
        // 固定顏色
        currentIndex: _currentIndex,
        // 選擇的默認(rèn)值
        items: items,
        onTap: onTap,
        // 點(diǎn)擊回調(diào)
        selectedFontSize: 12, // 選擇字體大小設(shè)置為12（因?yàn)槟J(rèn)大小是12臣缀，這樣可以去掉變大動(dòng)畫）
        // selectedLabelStyle: ,
      ),
    );
  }
}

展示樣式：

image.png

至此坝橡，我們已掌握跨端本地資源的加載

?? 本地圖片的加載，也可以將配置文件直接寫成images/精置，Flutter會(huì)自動(dòng)通過名稱來尋找圖片

image.png

3. 開發(fā)`發(fā)現(xiàn)頁`

發(fā)現(xiàn)頁比較簡單计寇，部件是ListView，配合Cell展示脂倦。

UI開發(fā)
添加手勢事件

image.png

3.1 UI開發(fā)

創(chuàng)建 pages文件夾番宁，將頁面都放在這里。新建discover_cell.dart文件赖阻，

image.png
其中discover_page代碼為：

創(chuàng)建變量_themeColor記錄主題背景色;

appBar導(dǎo)航欄設(shè)置背景色蝶押，centerTitle標(biāo)題居中（安卓有效）,elevation設(shè)置為0.0，去除分割線

child和children區(qū)別：
child表示一個(gè)部件火欧，children表示多個(gè)部件

使用ListView布局頁面棋电，分割線使用左白右灰兩個(gè)部件構(gòu)成

import 'package:flutter/material.dart';
import 'package:wechat_demo/pages/discover_cell.dart';

class DiscoverPage extends StatefulWidget {
  Color _themeColor = Color.fromRGBO(220, 220, 220, 1.0);

  @override
  _DiscoverPageState createState() => _DiscoverPageState();
}

class _DiscoverPageState extends State<DiscoverPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: widget._themeColor,
          centerTitle: true, // 安卓的導(dǎo)航欄標(biāo)題未居中茎截，可以設(shè)置居中
          title: Text(
            "朋友圈",
            style: TextStyle(color: Colors.black),
          ),
          elevation: 0.0 // 去除分割線
          ),
      body: Container(
        // child: 表示一個(gè)部件
        // children: 表示一堆部件
        color: widget._themeColor,
        child: ListView(children: <Widget>[
          DiscoverCell(title: "朋友圈", imageName: "images/朋友圈.png",),
          SizedBox(height: 8),
          DiscoverCell(title: "掃一掃", imageName: "images/掃一掃2.png",),
          Container(height: 1, child: Row(children: [Container(width: 40, color: Colors.white), Container(color: widget._themeColor)]),),
          DiscoverCell(title: "搖一搖", imageName: "images/搖一搖.png",),
          SizedBox(height: 8),
          DiscoverCell(title: "看一看", imageName: "images/看一看icon.png",),
          Container(height: 1, child: Row(children: [Container(width: 40, color: Colors.white), Container(color: widget._themeColor)]),),
          DiscoverCell(title: "搜一搜", imageName: "images/搜一搜3.png",),
          SizedBox(height: 8),
          DiscoverCell(title: "附近的人", imageName: "images/附近的人icon.png",),
          SizedBox(height: 8),
          DiscoverCell(title: "購物", imageName: "images/購物.png", subImageName: "images/badge.png", subTitle: "618限時(shí)特惠",),
          Container(height: 1, child: Row(children: [Container(width: 40, color: Colors.white), Container(color: widget._themeColor)]),),
          DiscoverCell(title: "游戲", imageName: "images/游戲2.png",),
          SizedBox(height: 8),
          DiscoverCell(title: "小程序", imageName: "images/小程序.png",)
        ]),
      ),
    );
  }
}

使用圖片資源時(shí)，一定注意先導(dǎo)入images文件夾离陶，再在pubspec.yaml配置文件中設(shè)置圖片路徑稼虎，最后再使用圖片。

image.png

其中discover_cell.dart代碼為：

入?yún)⒂?code>圖片名稱、標(biāo)題、子標(biāo)題剑刑、紅點(diǎn)圖片名稱四個(gè)哮洽，?可以將光標(biāo)停留在參數(shù)處，按住option + enter鍵杉适，自動(dòng)生成構(gòu)造方法谎倔。
其中可使用@ required聲明必傳參數(shù)，使用assert斷言做錯(cuò)誤提示猿推。

mainAxisAlignment主軸的對齊方式設(shè)置為spaceBetween片习，等分中間剩余空間。

使用三目運(yùn)算符判斷是否展示部件蹬叭。

import 'package:flutter/material.dart';

class DiscoverCell extends StatelessWidget {
  final String imageName; // 圖片名稱 
  final String title; // 標(biāo)題
  final String subTitle; // 子標(biāo)題 
  final String subImageName; //紅點(diǎn)圖片名稱

  const DiscoverCell(
      {Key key,
      @required this.imageName, // @required 必傳
      @required this.title, // @required 必傳
      this.subTitle,
      this.subImageName})
      : assert(imageName != null, 'imageName為空'),
        assert(title != null, 'title為空'),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      height: 54,
      padding: EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, // 等分中間剩余的空間
        children: [
          Container(
              child: Row(
                children: [
                  Image(image: AssetImage(imageName), width: 20, height: 20), // 圖片
                  SizedBox(width: 15), // 間距
                  Text(title), // 標(biāo)題
                ],
              )),
          Container(
              child: Row(
                children: [
                  Text(subTitle != null ? subTitle : "", style:  TextStyle(color: Colors.grey),), // 副標(biāo)題
                  subImageName != null ? Container(child: Image(image: AssetImage(subImageName), width: 14, height: 14), margin: EdgeInsets.only(left: 8,right: 8)) : Container(), // 紅點(diǎn)
                  Image(image: AssetImage('images/icon_right.png'), width: 14, height: 14) // 箭頭
                ],
              )),
        ],
      ),
    );
  }
}

成功完成上面預(yù)期UI效果藕咏，但缺少點(diǎn)擊事件和效果(cell觸摸時(shí)灰色，常規(guī)和放開都是白色)秽五。

3.2 添加手勢事件

添加手勢事件孽查，需要記錄變更狀態(tài)，所以需要將StatelessWidget不可變部件改為StatefulWidget可變部件：

不可變部件轉(zhuǎn)可變部件有三步：

stful快捷鍵創(chuàng)建可變部件坦喘，完成命名

將原不可變組件build直接拷貝給State的build盲再，build內(nèi)屬性調(diào)用修改為widget.屬性名進(jìn)行調(diào)用

刪除原不可變組件即可。

在添加手勢部件前瓣铣，先準(zhǔn)備一個(gè)簡單的discover_child_page.dart詳情頁
（后面點(diǎn)擊cell答朋，跳轉(zhuǎn)詳情頁)

import 'package:flutter/material.dart';

class DiscoverChildPage extends StatelessWidget {
  // 接受入?yún)itle,必傳參數(shù)( 構(gòu)造函數(shù)中@required 聲明)
  final String title;

  const DiscoverChildPage ({Key key, @required this.title}) : assert(title != null, '缺少標(biāo)題'), super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title), // 展示導(dǎo)航欄標(biāo)題
        ),
      body: Center(
        child:  Text(title), // 文本居中展示
      ),
    );
  }
}

給部件添加手勢，只需要用GestureDetector手勢部件包裹原部件即可：

添加onTap點(diǎn)擊棠笑、onTapCancel取消點(diǎn)擊梦碗、onTapDown按下三個(gè)事件，創(chuàng)建獨(dú)立的響應(yīng)函數(shù)腐晾。
點(diǎn)擊和取消點(diǎn)擊時(shí)叉弦，cell背景為白色，按下時(shí)藻糖，cell背景為灰色淹冰。

onTap點(diǎn)擊新增了路由跳轉(zhuǎn)，使用context當(dāng)前上下文的Navigator導(dǎo)航器巨柒，push入棧Material頁面樱拴，返回新頁面build的部件柠衍。

import 'package:flutter/material.dart';
import 'discover_child_page.dart';

class DiscoverCell extends StatefulWidget {

  final String imageName;
  final String title;
  final String subTitle;
  final String subImageName;

  const DiscoverCell(
      {Key key,
        @required this.imageName, // @required 必傳
        @required this.title, // @required 必傳
        this.subTitle,
        this.subImageName})
      : assert(imageName != null, 'imageName為空'),
        assert(title != null, 'title為空'),
        super(key: key);

  @override
  _DiscoverCellState createState() => _DiscoverCellState();
}

class _DiscoverCellState extends State<DiscoverCell> {

  // 私有cell顏色屬性
  Color _cellColor = Colors.white;

  // 點(diǎn)擊（跳轉(zhuǎn)頁面，恢復(fù)白色）
  void onTap() {
    // 路由跳轉(zhuǎn)
    Navigator.of(context).push(
      // MaterialPageRoute 頁面路由晶乔，返回build的部件
        MaterialPageRoute(builder: (BuildContext context ) => DiscoverChildPage(title: widget.title))
    );

    setState(() => _cellColor = Colors.white );
  }

  // 點(diǎn)擊取消（白色）
  void onTapCancel() {
    setState(() => _cellColor = Colors.white );
  }

  // 點(diǎn)擊按下(灰色)
  void onTapDown(TapDownDetails details) {
    setState(() => _cellColor = Color.fromRGBO(220, 220, 220, 1.0));
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
      color: _cellColor,
      height: 54,
      padding: EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
              child: Row(
                children: [
                  Image(image: AssetImage(widget.imageName), width: 20, height: 20), // 圖片
                  SizedBox(width: 15), // 間距
                  Text(widget.title), // 標(biāo)題
                ],
              )),
          Container(
              child: Row(
                children: [
                  Text(widget.subTitle != null ? widget.subTitle : "", style:  TextStyle(color: Colors.grey),), // 副標(biāo)題
                  widget.subImageName != null ? Container(child: Image(image: AssetImage(widget.subImageName), width: 14, height: 14), margin: EdgeInsets.only(left: 8,right: 8)) : Container(), // 紅點(diǎn)
                  Image(image: AssetImage('images/icon_right.png'), width: 14, height: 14) // 箭頭
                ],
              )),
        ],
      ),
    ),
      onTap: onTap, // 點(diǎn)擊事件
      onTapCancel: onTapCancel, //點(diǎn)擊取消
      onTapDown: onTapDown, // 點(diǎn)擊按下
    );
  }
}

image.png

至此珍坊，完成發(fā)現(xiàn)頁面的簡單開發(fā)

【快捷方式】

Android Studio的批量修改： command + F搜索內(nèi)容，選中Select All Occurrences

image.png

本節(jié)正罢，我們熟悉了框架搭建阵漏，啟動(dòng)頁、Icon和資源的加載翻具，最后完成 發(fā)現(xiàn)頁面的開發(fā)履怯。
下一節(jié)，我們完成個(gè)人中心和通訊錄頁面的開發(fā)裆泳。

最后編輯于：2021.02.08 12:32:21

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末叹洲，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子工禾，更是在濱河造成了極大的恐慌运提，老刑警劉巖，帶你破解...
沈念sama閱讀 222,627評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件闻葵，死亡現(xiàn)場離奇詭異民泵，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)笙隙，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,180評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門洪灯，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人竟痰，你說我怎么就攤上這事签钩。” “怎么了坏快？”我有些...
開封第一講書人閱讀 169,346評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵铅檩，是天一觀的道長。經(jīng)常有香客問我莽鸿，道長昧旨，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 60,097評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任祥得，我火速辦了婚禮兔沃，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘级及。我一直安慰自己乒疏，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 69,100評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布饮焦。她就那樣靜靜地躺著怕吴，像睡著了一般窍侧。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上转绷，一...
開封第一講書人閱讀 52,696評論 1贊 312
城市分裂傳說
那天伟件，我揣著相機(jī)與錄音，去河邊找鬼议经。笑死斧账，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的煞肾。我是一名探鬼主播其骄，決...
沈念sama閱讀 41,165評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼扯旷！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起索抓，我...
開封第一講書人閱讀 40,108評論 0贊 277
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤钧忽，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后逼肯，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耸黑，經(jīng)...
沈念sama閱讀 46,646評論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,709評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年篮幢，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了大刊。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,861評論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡三椿，死狀恐怖缺菌，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情搜锰，我是刑警寧澤伴郁，帶...
沈念sama閱讀 36,527評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站蛋叼，受9級特大地震影響焊傅，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狈涮，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,196評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一狐胎、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧歌馍，春花似錦握巢、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,698評論 0贊 25
一樁弒父案镜粤，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽捏题。三九已至，卻和暖如春肉渴，著一層夾襖步出監(jiān)牢的瞬間公荧，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,804評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工同规，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留循狰，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,287評論 3贊 379
代替公主和親
正文我出身青樓券勺，卻偏偏與公主長得像绪钥，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子关炼，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,860評論 2贊 361

Flutter入門四：搭建項(xiàng)目、資源調(diào)用、簡單開發(fā)

Flutter入門四：搭建項(xiàng)目菲宴、資源調(diào)用、簡單開發(fā)

1. 新建項(xiàng)目`wechat_demo`

2. `啟動(dòng)頁`、`Icon`和`本地資源讀取`

2.1 安卓啟動(dòng)頁

2.1.1 設(shè)置Icon圖標(biāo)

2.1.2 設(shè)置啟動(dòng)頁

2.1.3 運(yùn)行安卓模擬器

2.2 iOS啟動(dòng)頁

2.2.1 設(shè)置Icon圖標(biāo)

2.2.2 設(shè)置啟動(dòng)頁

2.2.3 運(yùn)行iPhone模擬器

2.3 Android Studio 本地圖片

2.3.1 圖片加入images文件夾

2.3.2 聲明`圖片位置`

2.3.3 AssetImage使用圖片

3. 開發(fā)`發(fā)現(xiàn)頁`

3.1 UI開發(fā)

3.2 添加手勢事件

推薦閱讀更多精彩內(nèi)容

Flutter入門四：搭建項(xiàng)目菲宴、資源調(diào)用、簡單開發(fā)

1. 新建項(xiàng)目wechat_demo

2. 啟動(dòng)頁、Icon和本地資源讀取

2.1 安卓啟動(dòng)頁

2.1.1 設(shè)置Icon圖標(biāo)

2.1.2 設(shè)置啟動(dòng)頁

2.1.3 運(yùn)行安卓模擬器

2.2 iOS啟動(dòng)頁

2.2.1 設(shè)置Icon圖標(biāo)

2.2.2 設(shè)置啟動(dòng)頁

2.2.3 運(yùn)行iPhone模擬器

2.3 Android Studio 本地圖片

2.3.1 圖片加入images文件夾

2.3.2 聲明圖片位置

2.3.3 AssetImage使用圖片

3. 開發(fā)發(fā)現(xiàn)頁

3.1 UI開發(fā)

3.2 添加手勢事件

推薦閱讀更多精彩內(nèi)容

1. 新建項(xiàng)目`wechat_demo`

2. `啟動(dòng)頁`、`Icon`和`本地資源讀取`

2.3.2 聲明`圖片位置`

3. 開發(fā)`發(fā)現(xiàn)頁`