Flutter(九)Flutter初体验

学习完Dart语言基础,我们来学习Flutter框架中的一些知识,控件使用,网络请求,手势操作等.

创建Flutter项目

创建Flutter项目有两种方式：通过命令行创建 和 通过开发工具创建

通过命令行创建

通过命令行创建很简单,类似于React-Native,使用命令创建项目

flutter create flutter_demo

命令行

再打开模拟器,创建项目的路径下运行命令

flutter run

项目运行

通过开发工具创建

这里我们使用 Android Studio创建一个Flutter项目

开发工具创建flutter

选择application下一步,创建完成.
运行

项目启动

在目录下有一个lib文件夹，里面会存放我们编写的Flutter代码；
打开发现里面有一个main.dart，它是我们Flutter启动的入口文件，里面有main函数

开始Flutter 代码

我们把main.dart中的代码删除,增加以下代码

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

下面我们分析以下上面的代码
runApp() 函数会持有传入的 Widget，并且使它成为 widget 树中的根节点。在这个例子中，Widget 树有两个 widgets， Center widget 及其子 widget ——Text 。框架会强制让根 widget 铺满整个屏幕，也就是说“Hello World”会在屏幕上居中显示。在这个例子我们需要指定文字的方向

runApp()

runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的

void runApp(Widget app) {
  ...省略代码
}

该函数让我们传入一个widget
widget到底是啥?
安卓和iOS开发的人一般喜欢称为控件,
前端开发人员一般喜欢称为组件

基础 widgets

Text
Text widget 可以用来在应用内创建带样式的文本。
Row, Column
这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的 flexbox 布局模型设计的。
Stack
Stack widget 不是线性（水平或垂直）定位的，而是按照绘制顺序将 widget 堆叠在一起。你可以用 Positioned widget 作为Stack 的子 widget，以相对于 Stack 的上，右，下，左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。
Container
Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container可以使用矩阵在三维空间进行转换。

代码改进

我们可能希望文字大一些,

文字大一些: 需要给Text文本设置一些样式；

import 'package:flutter/material.dart';

main(List<String> args) {
runApp(
  Center(
    child: Text(
      "Hello World",
      textDirection: TextDirection.ltr,
      style: TextStyle(fontSize: 36),
    ),
  )
);
}

效果

目前我们虽然可以显示HelloWorld，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。

正常的App页面应该有一定的结构，比如通常都会有导航栏，会有一些背景颜色等

在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello World"),
        ),
        body: Center(
          child:Text(
            "Hello,World!",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize: 30),
          ) ,
        ),
      ),
    ));
}

改进

Scaffold是什么呢？

翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；
Scaffold也有一些属性，比如appBar和body；
appBar是用于设计导航栏的，我们传入了一个title属性；
body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

案例学习

自定义Widget

自定义widget

标题的Widget：使用一个Text Widget完成；
描述的Widget：使用一个Text Widget完成；
图片的Widget：使用一个Image Widget完成；
上面三个Widget要垂直排列，我们可以使用一个Column的Widget（上一个章节中我们使用了一次Row是水平排列的）

列表数据展示

我们创建三个ImageItem竖直排列展示
代码如下

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blueAccent
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Demo"),
        ),  
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ImageItem("Apple1", "第一行的详情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
        ImageItem("Apple2", "第二行的详情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
        ImageItem("Apple3", "第三行的详情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg")
      ],
    );
  }
}
class ImageItem extends StatelessWidget{
  String title;
  String detail;
  String imgUrl;
  ImageItem(this.title,this.detail,this.imgUrl);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(title,style: TextStyle(fontSize: 20)),
        Text(detail,style: TextStyle(fontSize: 14)),
        Image.network(imgUrl),
      ],
    );
  }

}

执行结果:

案例

错误信息：下面出现了黄色的斑马线；
这是因为在Flutter的布局中，内容是不能超出屏幕范围的，当超出时不会自动变成滚动效果，而是会报下面的错误

如何可以解决这个问题呢？

我们将Column换成ListView即可；
ListView可以让自己的子Widget变成滚动的效果

细节调整

文字距离图片太近
给Item增加一个内边距和边框
最终代码如下:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blueAccent
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Demo"),
        ),  
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ImageItem("Apple1", "第一行的详情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
        ImageItem("Apple2", "第二行的详情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
        ImageItem("Apple3", "第三行的详情", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg")
      ],
    );
  }
}
class ImageItem extends StatelessWidget{
  final String title;
  final String detail;
  final String imgUrl;
  ImageItem(this.title,this.detail,this.imgUrl);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        border: Border.all()
      ),
      child: Column(
          children: <Widget>[
              Text(title,style: TextStyle(fontSize: 20)),
              Text(detail,style: TextStyle(fontSize: 14)),
              SizedBox(height: 10,),
              Image.network(imgUrl),
          ]
      ),
    );
  }

}

运行结果:

案例

本篇中很多widget未详细说明用法,后面会具体说用法,本篇主要学习一个页面搭建的主要流程.
本文参考Flutter(六)之Flutter开发初体验