Flutter 第一个界面

最新推荐文章于 2024-04-05 16:38:32 发布

x7813180

最新推荐文章于 2024-04-05 16:38:32 发布

阅读量562

点赞数

文章标签： flutter android android studio

本文链接：https://blog.csdn.net/chenfeiphp/article/details/130041653

版权

这篇博客介绍了如何在Flutter中创建第一个界面，包括入口函数、ArticleApp的构建、ArticlePage的详细设计，如PullToRefresh的实现、ListView条目的构建方法，以及网络请求和库的导入。讲解了在构建ArticlePage时使用Scaffold的重要性，以及如何通过 Expanded 组件在Column或Row中分配空间。同时，文章提到了使用dio库进行网络请求，并展示了如何在pubspec.yaml中导入和管理依赖。

摘要由CSDN通过智能技术生成

第一个页面

app首页

入口函数

一个Flutter工程的入口函数与Dart命令行工程一样是main，不同的是在Flutter中执行runApp(ArticleApp()) 就能够在手机屏幕上展示这个Widget。

import 'package:flutter/material.dart';
void main() => runApp(new ArticleApp());

ArticleApp

我们要实现的文章列表页面UI就在ArticleApp中定义：

class ArticleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(
            '文章',
            style: const TextStyle(color: Colors.white),
          ),
        ),
        body: new ArticlePage(),
      ),
    );
  }
}

build方法中返回的就是我们需要显示在屏幕上的widget。MaterialApp代表使用Material Design风格，这是一个封装了很多Android MD设计所必须要的组件的小部件。假设我们需要显示一个Text,而没有包裹在MaterialApp内：

class ArticleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Center:摆放在中间
    return Center(
      child: Text("你好!"),
    );
  }
}

如果直接运行则会出现异常，因为Flutter不知道以什么顺序摆放文字(从左到右/从右到左)

因此我们不得不给Text指名textDirection属性:

class ArticleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("你好!",
          style: const TextStyle(color: Colors.white),
          textDirection: TextDirection.ltr),
    );
  }
}

但是如果包含在MaterialApp当中我们就不需要指名类似textDirection这样的属性了，因为内部已经内置了一套风格，指明了这些必须属性。而Scaffold则实现了基本的 Material Design布局结构，在 Material 设计中定义的单个界面上的各种布局元素，在 Scaffold 中都支持。比如：AppBar、抽屉菜单、BottomNavigationBar等等。

ArticlePage

在我们的布局中指定了Scaffold的body(主体)为ArticlePage，这是一个我们自定义的组合Widget。

class ArticlePage extends StatefulWidget {
  @override
  _ArticlePageState createState() => _ArticlePageState();
}

class _ArticlePageState extends State<ArticlePage> {
  ///滑动控制器
  ScrollController