第一个 Flutter 应用（1）

今天分享代码包括以下实现

显示列表

可展开列表

下拉刷新

大家可能习惯使用 vscode 来开发 Flutter ，因为他更轻量级，不过推荐大家用 Android Studio 因为这个 IDE 提供许多好的功能帮助大家快速开发我们应用。

import 'package:flutter/material.dart';

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

class ZiApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: "Flutter Demo",
      theme: new ThemeData(
        primarySwatch: Colors.blue
      ),
      home: new MyHomePage(title:"Fluter Demo Home page"),
    );
  }

}

class MyHomePage extends StatefulWidget{
  MyHomePage({Key key, this.title}):super(key: key);
  final String title;
  @override
  State createState() {
    // TODO: implement createState
    return _MyHomePageState();
  }

}

class _MyHomePageState extends State{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),body: Center(child: Text("hello world"),),
    );
  }
}

这是我们应用起点，也是就是 flutter 模板进行一些删减。

class Article {
  final String text;
  final String domain;
  final String by;
  final String age;
  final int score;
  final int commentsCount;

  const Article(
      {this.text,
      this.domain,
      this.by,
      this.age,
      this.score,
      this.commentsCount});
}

final articles = [
  new Article(text: "Flutter 引擎是有 c/c++ 编写，在 Android 上通过 NDK 编译而在 iOS 通过 LLVM 编译。",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68),
  new Article(text: "Flutter 引擎是有 c/c++ 编写，在 Android 上通过 NDK 编译而在 iOS 通过 LLVM 编译。",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68),
  new Article(text: "Flutter 框架是由 Dart 语言编写，当部署到在生成环境时，Dart 代码会通过 AOT(Ahead of Time)的方式编译成为原生代码来执行",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68),
  new Article(text: "main.dart 是我们应用的启动文件，入口方法 main 方法，运行程序会找到 main 方法来执行这些都是 Flutter 来自动执行该方法。我们不需要手动调用 main 方法。",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68),
  new Article(text: "Vue 3.0 给我们带来哪些惊喜（2）- 的监听系统的实现",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68),
  new Article(text: "在 Dart 语言中 object 是第一个公民，那么也就是说 Dart 是属于 OO 系的语言，通过类来组织代码。创建自己的 widget ，每一个 Widget 都是可以定义 Widget 的模样和功能的 class，那么我们创建 Class 并让其扩展 Widget。要扩展 Widget 我们就需要先引入所需包（package）",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68),
  new Article(text: "Flutter 引擎是有 c/c++ 编写，在 Android 上通过 NDK 编译而在 iOS 通过 LLVM 编译。",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68),
  new Article(text: "在 Dart 语言中 object 是第一个公民，那么也就是说 Dart 是属于 OO 系的语言，通过类来组织代码。创建自己的 widget ，每一个 Widget 都是可以定义 Widget 的模样和功能的 class，那么我们创建 Class 并让其扩展 Widget。要扩展 Widget 我们就需要先引入所需包（package）",domain: "zidea.com",by: "zidea",age: "3 hours",score: 177,commentsCount: 68)
];

在项目 src 文件夹下创建一个名字叫 Article.dart 的文件，内容是我们创建一些假数据。今天就是要将这些假数据显示在我们手机上。

class _MyHomePageState extends State {
  List
 _articles = articles;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _articles.map((article)=> Text(article.text)).toList(),
        ),
      ),
    );
  }
}

children: _articles.map(_buildItem).toList(),
// some code
Widget _buildItem(Article e){
  return Text(e.text);
}

调整字号

Widget _buildItem(Article article){
  return Text(article.text,style: TextStyle(fontSize: 24.0),);
}

替换为 ListView

      body: ListView(
          children: _articles.map(_buildItem).toList(),

      ),

加一点内边距

Widget _buildItem(Article article){
  return Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text(article.text,style: TextStyle(fontSize: 24.0),),
  );
}

ListTile

Widget _buildItem(Article article) {
  return Padding(
      padding: const EdgeInsets.all(16.0),
      child: ListTile(
          title: Text(
            article.text,
            style: TextStyle(fontSize: 24.0),
          ),
          subtitle: Text(
            "${article.commentsCount} comments",
          )));
}

跳转到浏览器

import 'package:url_launcher/url_launcher.dart';

              onTap: () async{
                  final fakeUrl = "http://${article.domain}";
                  if(await canLaunch(fakeUrl)){
                    launch(fakeUrl);
                  }


              },

children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("${article.commentsCount} comments"),
            MaterialButton(onPressed: (){},color:Colors.green,child: Text("打开"),),
          ],
        )
      ],

• mainAxisAlignment: MainAxisAlignment.spaceBetween 表示内容为两边对齐。

可以把按钮修改图标按钮

children: [
            Text("${article.commentsCount} comments"),
            IconButton(icon:Icon(Icons.launch),color: Colors.green,onPressed: (){
              
            },)
          ],

为我们评价按钮添加一些事件

            IconButton(icon:Icon(Icons.launch),color: Colors.green,onPressed: ()async{
              final fakeUrl = "http://${article.domain}";
                  if(await canLaunch(fakeUrl)){
                    launch(fakeUrl);
                  }
            },)

添加下拉刷新

     body: RefreshIndicator(
        onRefresh: (){
          Scaffold.of(context).showSnackBar(SnackBar(content: Text("刷新")));
          return;
        },
        child: ListView(
          children: _articles.map(_buildItem).toList(),
        ),
      ),

下拉刷新来显示一个 snackBar ，这样做好像没有效果。我们还需进一步调整代码。

下拉刷新

下拉刷新效果，下拉刷新来后移除列表的第一条数据，这里返回一个 Future 对象说以需要给 onRefresh 添加 async 表示异步函数。调用 setState

        onRefresh: () async{
           await Future.delayed(const Duration(seconds: 1));
           setState(() {
             _articles.removeAt(0);
           });
        },