flutter 学习之项目一

本博客主要是展示一款诗词类app创建路程，首先从网络上吧啦一些诗词数据，然后进行页面的UI编辑，初期功能有首页【展示所有诗词条目，点击进入诗词详情页面】，游戏页面【通过读取本地的数据选取诗词，然后把内容中的每一个字打乱顺序随机展示，用户通过排列，进行编订出正确的诗词，通关后，可以点击下一关，另外添加分享功能，可以分享用户通关】，设置页面【1用户可以自己录入诗词到app中，并且展示到UI上 2修改所有诗词详情页面的背景图片】

1 创建项目

打开终端，输入命令，创建项目名为ancient_poetry的项目

cd cd Desktop/FlutterPro
flutter create ancient_poetry

2 打开项目

a）用Visual Studio Code打开项目，创建4个文件夹，文件夹的名字为home、other、game、setting
b）在other 文件夹下创建一个名字为bottomNavigationBar.dart的文件
在这个名字为bottomNavigationBar.dart文件中编写顶部导航和底部导航相关代码

import 'package:flutter/material.dart';
import '../home/home.dart';
import '../setting/setting.dart';
import '../game/game.dart';

class TabbarController extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyTabbarState();
  }
}

class _MyTabbarState extends State<TabbarController> {
  int _currentIndex = 0;
  var _pageList;
  var appBarTitles = ['Home', 'Game', 'Set'];
  void initData() {
    _pageList = [
      new HomeListView(),
      new GameListView(),
      new SettingListView(),
    ];
  }
 
  void _onTapHander(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    initData();
    return Scaffold(
      appBar: new AppBar(
        title: Text(appBarTitles[_currentIndex]),
      ),
      body: _pageList[_currentIndex],
      bottomNavigationBar: new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text(appBarTitles[0])),
          BottomNavigationBarItem(
              icon: Icon(Icons.games), title: Text(appBarTitles[1])),
          BottomNavigationBarItem(
              icon: Icon(Icons.menu), title: Text(appBarTitles[2])),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: _onTapHander,
      ),
    );
  }
}

c)打开文件lib/main.dart，

import 'package:flutter/material.dart';
import 'other/bottomNavigationBar.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppName',
      debugShowCheckedModeBanner: false, // 去掉app右上角的debug图标
      home: SampleAppPage(),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}
class SampleAppPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        return new TabbarController();
  }
}

d）打开home文件夹，创建home.dart文件，此文件是底部导航的首页

e）
f）
g）打开other文件夹创建名字为TangPoetry_sata.dart文件，这个文件中先加入一些本地数据

class TangPoetryData {
  const TangPoetryData({
    this.title,
    this.author,
    this.contents,
    this.notes,
    this.imageUrl,
  });

  final String title;
  final String author;
  final String contents;
  final String notes;
  final String imageUrl;
}

final List<TangPoetryData> tangPoetryDatas = [
  TangPoetryData(
    title: '和张仆射塞下曲·其一',
    author: '唐代：卢纶',
    contents: '鹫翎金仆姑，燕尾绣蝥弧。独立扬新令，千营共一呼。',
    notes: '翻译：身佩雕羽制成的金仆姑好箭，旌旗上扎成燕尾蝥弧多鲜艳。大将军威严地屹立发号施令，千军万马一呼百应动地惊天。',
    imageUrl:
        'https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56',
  ),
  TangPoetryData(
    title: '和张仆射塞下曲·其二',
    author: '唐代：卢纶',
    contents: '林暗草惊风，将军夜引弓。平明寻白羽，没在石棱中。',
    notes: '翻译：昏暗的树林中，草突然被风吹动，将军在夜色中连忙开弓射箭。天明寻找昨晚射的白羽箭，箭头深深插入巨大石块中。',
    imageUrl:
        'https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56',
  ),
  TangPoetryData(
    title: '和张仆射塞下曲·其三',
    author: '唐代：卢纶',
    contents: '月黑雁飞高，单于夜遁逃。欲将轻骑逐，大雪满弓刀。',
    notes: '翻译：死寂之夜，乌云遮月，天边大雁惊飞，单于的军队想要趁着夜色悄悄潜逃。正想要带领轻骑兵一路追赶，大雪纷纷扬扬落满了身上的弓刀。',
    imageUrl:
        'https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56',
  ),
  TangPoetryData(
    title: '和张仆射塞下曲·其四',
    author: '唐代：卢纶',
    contents: '野幕敞琼筵，羌戎贺劳旋。醉和金甲舞，雷鼓动山川。',
    notes: '翻译：在野外天幕下设下劳军盛宴，边疆兄弟民族都来祝贺我军凯旋。喝醉酒后还要和着金甲跳舞，欢腾的擂鼓声震动了周围的山川。',
    imageUrl:
        'https://img01.sogoucdn.com/app/a/07/80f2e20a98944a0fa662d3fc5f472e56',
  ),
];

3 项目代码地址

本项目的地址:link