Flutter 实战

Flutter入门（6）：Flutter 页面创建与跳转

2020-09-04  本文已影响0人  Maojunhao

1. 运行程序

建议使用 Android Studio 进行 flutter 编程 , Android Studio 对 dart 语法很友好。

2. 示范代码

话不多说，先上代码，代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 主页创建

优雅的编程，我们让 main.dart 更清晰，代码逻辑后置。先创建一个 home.dart 文件。

import 'package:flutter/material.dart';

// 这里我们预留动态更新页面功能，使用 StatefulWidget
class FMHomeVC extends StatefulWidget {
  @override
  FMHomeState createState() => FMHomeState();
}

class FMHomeState extends State<FMHomeVC> {
  return Container(
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: Text("Home"),
        ),
        body: Center(
          child: Text("Home"),
        ),
      ),
    );
}

然后对 main.dart 进行更改，使用 home.dart 文件作为主页，注意修改 import 路径。

import 'package:flutter/material.dart';
// 此处注意修改为自己的 home.dart 路径
import 'package:FMStudyApp/home/home.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: FMHomeVC(),
    );
  }
}

运行程序后，如下图，第一个主页已经生成好了。


Home Simple.png

3. ListView 创建

ListView 可以说是应用非常广泛的控件了，并且简单实用，考虑到后续要在代码下载地址持续更新，我们就首先介绍使用 ListView。

先简单介绍一下代码逻辑。

/* 
此处代码仅仅介绍这部分逻辑，不要复制使用，下边会贴详细代码。
*/
class FMHomeVC extends StatefulWidget {
  @override
 // 创建 State
  FMHomeState createState() => FMHomeState();
}

class FMHomeState extends State<FMHomeVC> {
  // 创建数据源
  var funcLists = [];

  @override
  // 重写父类方法，页面初始化会调用
  void initState() {
    super.initState();
   // 封装数据初始化方法，为数据源添加数据，未来也可以在这里做网络请求
    initData();
  }

  void initData() {
   // 调用父类方法，会刷新页面
    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Container(
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: Text("Widgets 目录"),
        ),
        body: Center(
          child: ListView.builder(
            padding: const EdgeInsets.all(15.0),
            // 生成对应数据源数量的 Item
            itemCount: funcLists.length,
            itemBuilder: (context, index){
              // 按照数据源对每个 Item 进行渲染
              var func = funcLists[index];
              return ListTile(
                onTap: (){
                  // 点击事件，在这里处理不同 Item 跳转
                },
              );
            },
          ),
        ),
      ),
    );
  }

下边上详细代码

import 'package:flutter/material.dart';

class FMHomeVC extends StatefulWidget {
  @override
  FMHomeState createState() => FMHomeState();
}

class FMHomeState extends State<FMHomeVC> {
  var funcLists = [];

  @override
  void initState() {
    super.initState();

    initData();
  }

  void initData() {
    funcLists.add({"name": "基础组件", "desc": "在构建您的第一个Flutter应用程序之前，您绝对需要了解这些widget。"});
    funcLists.add({"name": "Material Components", "desc": "实现了Material Design 指南的视觉、效果、motion-rich的widget。"});
    funcLists.add({"name": "Cupertino(iOS风格的widget)", "desc": "用于当前iOS设计语言的美丽和高保真widget。"});
    funcLists.add({"name": "Layout", "desc": "排列其它widget的columns、rows、grids和其它的layouts。"});
    funcLists.add({"name": "Text", "desc": "文本显示和样式。"});
    funcLists.add({"name": "Assets、图片、Icons", "desc": "管理assets, 显示图片和Icon。"});
    funcLists.add({"name": "Input", "desc": "Material Components 和 Cupertino中获取用户输入的widget。"});
    funcLists.add({"name": "动画和Motion", "desc": "在您的应用中使用动画。查看Flutter中的动画总览。"});
    funcLists.add({"name": "交互模型", "desc": "响应触摸事件并将用户路由到不同的页面视图（View）。"});
    funcLists.add({"name": "样式", "desc": "管理应用的主题，使应用能够响应式的适应屏幕尺寸或添加填充。"});
    funcLists.add({"name": "绘制和效果", "desc": "Widget将视觉效果应用到其子组件，而不改变它们的布局、大小和位置。"});
    funcLists.add({"name": "Async", "desc": "Flutter应用的异步模型。"});
    funcLists.add({"name": "滚动", "desc": "滚动一个拥有多个子组件的父组件。"});
    funcLists.add({"name": "辅助功能", "desc": "给你的App添加辅助功能(这是一个正在进行的工作)。"});

    print(funcLists);

    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Container(
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.lightBlue,
          title: Text("Widgets 目录"),
        ),
        body: Center(
          child: ListView.builder(
            padding: const EdgeInsets.all(15.0),
            itemCount: funcLists.length,
            itemBuilder: (context, index){
              var func = funcLists[index];
              return ListTile(
                contentPadding: const EdgeInsets.all(10.0),
                title: Text(
                  "${func["name"]}",
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.black,
                  ),
                ),
                subtitle: Text(
                  "${func["desc"]}",
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.grey,
                  ),
                ),
                onTap: (){
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return FMHomeVC();
                    }),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }

运行效果如下图


Home ListView.png

点击跳转后如下图


Push ListView.png

4. 技术小结

上一篇下一篇

猜你喜欢

热点阅读