利用Flutter寫一個跨平臺的果核APP（1）——界面篇1

時間 2019-12-08

標籤利用 flutter 一個跨平臺果核 app 界面简体版

原文原文鏈接

前言

從這裏開始，我就準備邊學邊作邊用博客記錄下本身的重構歷程，會結合已有的app的樣式進行重構。bash

原圖

先看一下app的截圖： app

上面兩個截圖是app的首頁和左側菜單欄的截圖，首頁下方是一個能夠滑動的tab+viewpager，左側菜單欄是一個drawerlayout。

目標圖像

這是實現的效果圖 ide

接下來將會逐一分析界面並給出代碼。

解析

首先咱們要作的就是劃分好界面層次，這一步操做仍是很簡單的，我直接貼出來目前的頁面層次結構 ui

在flutter中，一切都是widget，也就是說所見的都是控件，一個空間就是一個類，一個類能夠放在一個dart文件裏面，也就是說能夠理解爲一個控件就是一個dart文件。在這裏項目目錄分級爲以下幾個部分：

lib爲存放dart文件的地方 common文件夾用於存放app執行所須要的文件 pages文件夾用於存放頁面文件 pages/main存放的是首頁的頁面文件 pages/school存放的是校園部分的頁面文件 main.dart是首頁的頁面文件 app.dart是整個app的入口文件this

入口文件

入口文件很簡單，直接上代碼spa

import 'package:flutter/material.dart';
import 'package:flutter_guohe/pages/main.dart';

void main() {
  runApp(new Guohe());
}

複製代碼

底部tabbar的實現

從以前的層次圖就能夠看出，tabbar控制着3個頁面，因此他應該是首頁的頂級元素，在main.dart中添加以下代碼，具體參考《Flutter底部導航欄的實現》3d

/**
 * APP的主入口文件
 */

import 'package:flutter/material.dart';

import 'package:flutter_guohe/pages/main/today.dart';
import 'package:flutter_guohe/pages/main/playground.dart';
import 'package:flutter_guohe/pages/main/kb.dart';
import 'package:flutter_guohe/pages/main/leftmenu.dart';

import 'package:flutter_guohe/common/eventBus.dart';

//果核的主界面
class Guohe extends StatefulWidget {
  @override
  GuoheState createState() => new GuoheState();
}

class GuoheState extends State<Guohe> with SingleTickerProviderStateMixin {
  TabController controller;
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    controller = new TabController(length: 3, vsync: this);
    eventBus.on<EventOpenDrawer>().listen((EventOpenDrawer data) {
      if (data.flag) _scaffoldKey.currentState.openDrawer();
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        key: _scaffoldKey,
        drawer: new LeftMenu(),
        body: new TabBarView(
          controller: controller,
          children: <Widget>[
            new Today(),
            new Kb(),
            new Playground(),
          ],
        ),
        bottomNavigationBar: new Material(
          color: Colors.white,
          child: new TabBar(
            controller: controller,
            labelColor: Colors.deepPurpleAccent,
            unselectedLabelColor: Colors.black26,
            tabs: <Widget>[
              new Tab(
                text: "今日",
                icon: new Icon(Icons.brightness_5),
              ),
              new Tab(
                text: "課表",
                icon: new Icon(Icons.map),
              ),
              new Tab(
                text: "操場",
                icon: new Icon(Icons.directions_run),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
複製代碼

左側菜單欄

左側菜單欄就是一個drawer，就是一個抽屜，在Scaffold中申明就行了，在這裏我爲了看起來不那麼亂，建立了一個leftmenu.dart文件用來展現左側菜單界面，只要知道了row、column、padding的用法就能夠很快的寫出來了，參考《flutter實戰1：完成一個有側邊欄的主界面》。下面貼代碼code

import 'package:flutter/material.dart';

//左側菜單欄
class LeftMenu extends Drawer {
  @override
  Widget build(BuildContext context) {
    return new Drawer(
      //側邊欄按鈕Drawer
      child: new ListView(
        children: <Widget>[
          //我的信息部分
          new Container(
              color: Color.fromARGB(255, 119, 136, 213),
              child: new Padding(
                padding: new EdgeInsets.all(26.0),
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Row(
                      children: <Widget>[
                        //頭像
                        new Container(
                          width: 80.0,
                          height: 80.0,
                          margin:
                              new EdgeInsets.only(right: 10.0, bottom: 15.0),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: new NetworkImage(
                                  'http://www.chedan5.com/upload/article/201803/06/1740235a9e62077e0aexbcUQh.jpg'),
                              //從Assets加載圖片
                              fit: BoxFit.cover,
                            ),
                            shape: BoxShape.circle,
                          ),
                        ),
                        new Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            new Text(
                              '梁越勇',
                              style: new TextStyle(
                                  color: Colors.white, fontSize: 25.0),
                            ),
                            new Text(
                              '152210702112',
                              style: new TextStyle(
                                  color: Colors.white, fontSize: 15.0),
                            )
                          ],
                        )
                      ],
                    ),
                    new Text(
                      "計算機學院",
                      style: new TextStyle(color: Colors.white, fontSize: 18.0),
                    )
                  ],
                ),
              )),
          new ListTile(
              //第二個功能項
              title: new Text('關於咱們'),
              leading: new Icon(Icons.accessibility),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("關於咱們"),
                    ));
              }),
          //分割線控件
          new ListTile(
              //退出按鈕
              title: new Text('分享此應用'),
              leading: new Icon(Icons.share),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("分享此應用"),
                    ));
              } //點擊後收起側邊欄
              ),
          //分割線控件
          new ListTile(
              //退出按鈕
              title: new Text('給咱們反饋'),
              leading: new Icon(Icons.feedback),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("給咱們反饋"),
                    ));
              } //點擊後收起側邊欄
              ),
          //分割線控件
          new ListTile(
              //退出按鈕
              title: new Text('聯繫開發者'),
              leading: new Icon(Icons.flight),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("聯繫開發者"),
                    ));
              } //點擊後收起側邊欄
              ),
          //分割線控件
          new ListTile(
              //退出按鈕
              title: new Text('加入交流羣'),
              leading: new Icon(Icons.group_add),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("加入交流羣"),
                    ));
              } //點擊後收起側邊欄
              ),
          new ListTile(
              //退出按鈕
              title: new Text('切換帳號'),
              leading: new Icon(Icons.sync),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("切換帳號"),
                    ));
              } //點擊後收起側邊欄
              ),
          new ListTile(
              //退出按鈕
              title: new Text('檢測升級'),
              leading: new Icon(Icons.refresh),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("檢測升級"),
                    ));
              } //點擊後收起側邊欄
              ),
          new ListTile(
              //退出按鈕
              title: new Text('更新說明'),
              leading: new Icon(Icons.info),
              onTap: () {
                Navigator.of(context).pop();
                Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("更新說明"),
                    ));
              } //點擊後收起側邊欄
              ),
        ],
      ),
    );
  }
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。