02-Flutter移動電商實(shí)戰(zhàn)-建立項(xiàng)目和編寫入口文件

環(huán)境搭建請參考之前寫的一篇文章：Flutter_初體驗(yàn)_創(chuàng)建第一個(gè)應(yīng)用

1、創(chuàng)建項(xiàng)目

采用AndroidStudio構(gòu)建本項(xiàng)目，FIle>New>New Flutter Project…

創(chuàng)建后的項(xiàng)目如下圖所示：

我們著重需要注意一下幾個(gè)文件夾,其他的暫時(shí)不用理會

文件夾作用

android	android平臺相關(guān)代碼
ios	ios平臺相關(guān)代碼
lib	flutter相關(guān)代碼，我們主要編寫的代碼就在這個(gè)文件夾
pubspec.yaml	配置文件，一般存放一些第三方的依賴。

2、編寫入口文件

flutter 中的入口文件為 main.dart，該文件位于 lib 文件夾中。

默認(rèn)創(chuàng)建的項(xiàng)目已經(jīng)給我?guī)Я艘恍y試代碼，運(yùn)行起來看一下：

接下來要開始我們自己的項(xiàng)目書寫了。

2.1 建立主頁文件和目錄結(jié)構(gòu)

我們在 lib 目錄下建立一個(gè) pages 目錄，這個(gè)目錄主要放置項(xiàng)目所用的所有 UI 界面的文件，在 page 目錄下，建立 index_page.dart 文件。

有了這個(gè)文件，我們先建立一個(gè)靜態(tài) Widget，主要是檢驗(yàn)我們的入口文件是否可用。

index_page.dart 代碼：

import?'package:flutter/material.dart';class?IndexPage??extends?StatelessWidget?{@overrideWidget?build(BuildContext?context)?{return?new?Scaffold(appBar:?new?AppBar(title:?new?Text("百姓生活+"),),body:?new?Center(child:?Text("我是居中的文本內(nèi)容"),),);} }

代碼寫完后，需要在 main.dart(入口文件)，用 impoart 引入 index_page.dart 文件。

import?'./pages/index_page.dart';

main.dart 全部代碼：

import?'package:flutter/material.dart'; import?'package:flutter_shop/pages/index_page.dart';void?main()?=>?runApp(MyApp());class?MyApp?extends?StatelessWidget?{@overrideWidget?build(BuildContext?context)?{return?new?Container(child:MaterialApp(title:?'Flutter?Demo',theme:?ThemeData(primarySwatch:?Colors.blue,),home:?new?IndexPage(),));} }

我們再次運(yùn)行起來看一下：

3、最后補(bǔ)充

跟著學(xué)習(xí)，以及在整理這個(gè)系列筆記中，關(guān)于文中一些基礎(chǔ)部分不再累贅，比如 StatefulWidget/StateLessWidget區(qū)別、Container/Center/Text基礎(chǔ)控件等。

posted @ 2019-06-14 09:12 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結(jié)

以上是生活随笔為你收集整理的02-Flutter移动电商实战-建立项目和编写入口文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。