分类标签归档:Flutter

Flutter - 使用长列表


标准的 ListView : https://docs.flutter.io/flutter/widgets/ListView-class.html 构造函数适用于小列表。 为了处理包含大量数据的列表,最好使用 ListView.builder : https://docs.flutter.io/flutter/widgets/ListView/ListView.builder.html 构造函数。

ListView的构造函数需要一次创建所有项目,但ListView.builder的构造函数不需要,它将在列表项滚动到屏幕上时创建该列表项。

1. 创建一个数据源

首先,我们需要一个数据源来...

阅读全文...

Flutter- 使用不同类型的子项创建列表


我们经常需要创建显示不同类型内容的列表。例如,我们可能正在制作一个列表,其中显示一个标题,后面跟着与该标题相关的几个子项,再后面是另一个标题,等等。

我们如何用Flutter创建这样的结构?

步骤

  1. 使用不同类型的数据创建数据源
  2. 将数据源转换为Widgets列表

1. 使用不同类型的数据创建数据源

条目(子项)类型

为了表示列表中的不同类型的条目,我们需要为每个类型的条目定义一个类。

在这个例子中,我们将在一个应用程序上显示一个标题,后面跟着五条消息。因此,我们将创建三个类:ListItemHeadingItem、和MessageItem

// The base class for...

阅读全文...

Flutter-基本List


显示数据列表是移动应用程序常见的需求。Flutter包含的ListView : https://docs.flutter.io/flutter/widgets/ListView-class.html Widget,使列表变得轻而易举!

创建一个ListView

使用标准ListView构造函数非常适合仅包含少量条目的列表。我们使用内置的ListTile Widget来作为列表项。

new ListView(
  children: <Widget>[
    new ListTile(
      leading: new Icon(Icons.map),
      tit...

阅读全文...

Flutter - 创建一个 Grid List


在某些情况下,您可能希望将item显示为网格,而不是一个普通列表。对于这需求,我们可以使用 GridView : https://docs.flutter.io/flutter/widgets/GridView-class.html Widget。

使用网格的最简单方法是使用 GridView.count : https://docs.flutter.io/flutter/widgets/GridView/GridView.count.html 构造函数,它允许我们指定行数或列数。

在这个例子中,我们将生成一个包含100个widget的list,在网格中显示它们的索引。这将帮助我们观察G...

阅读全文...

Flutter-使用缓存图片


在某些情况下,在从网上下载图片后缓存图片可能会很方便,以便它们可以脱机使用。为此,我们可以使用 cached_network_image : https://pub.dartlang.org/packages/cached_network_image 包来达到目的。

除了缓存之外,cached_image_network包在加载时还支持占位符和淡入淡出图片!

new CachedNetworkImage(
  imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/...

阅读全文...

Flutter-显示来自网上的图片


显示图片是大多数移动应用程序的基础。Flutter提供了Image : https://docs.flutter.io/flutter/widgets/Image-class.html Widget来显示不同类型的图片。

为了处理来自URL的图像,请使用 Image.network : https://docs.flutter.io/flutter/widgets/Image/Image.network.html 构造函数。

new Image.network(
  'https://raw.githubusercontent.com/flutter/website/maste...

阅读全文...

Flutter-给新页面传值


通常,我们不仅要导航到新的页面 ,还要将一些数据传给页面。例如,我们想传一些关于我们点击的条目的信息。

请记住:页面只是Widgets™。在这个例子中,我们将创建一个Todos列表。当点击一个todo时,我们将导航到一个显示关于待办事项信息的新页面 (Widget)。

Directions

  1. 定义一个Todo类。
  2. 显示Todos列表。
  3. 创建一个显示待办事项详情的页面。
  4. 导航并将数据传递到详情页。

1. 定义一个 Todo 类

首先,我们需要一种简单的方法来表示Todos(待办事项)。在这个例子中,我们将创建一个包含两部分数据的类:标题和描述。

class Todo {
  ...

阅读全文...

Flutter主题-使用主题共享颜色和字体样式


为了在整个应用中共享颜色和字体样式,我们可以使用主题。定义主题有两种方式:全局主题或使用Theme来定义应用程序局部的颜色和字体样式。 事实上,全局主题只是由应用程序根MaterialApp创建的Theme

定义一个主题后,我们可以在我们自己的Widgets中使用它。另外,Flutter提供的Material Widgets将使用我们的主题为AppBars、Buttons、Checkboxes等设置背景颜色和字体样式。

创建应用主题

为了在整个应用程序中共享包含颜色和字体样式的主题,我们可以提供ThemeData : https://docs.flutter.io/flutter/m...

阅读全文...