Flutter 即学即用系列博客——04 Flutter UI 初窥

前面三篇可以算是一个小小的里程碑。

主要是介绍了 Flutter 环境的搭建、如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter。

这一篇我们来学习下 Flutter 的 UI。

前言

说到 UI,我就简单说下 Flutter 作为一门跨平台语言具有的优势之一,提高效率吧。

举个例子:

假设现在要开发一个界面,Android 开发需要一天,iOS 开发也需要一天。那么就是两天。

如果你用 Flutter 开发,就只需要一天(因为 Android 和 iOS 都可以共用一套 Flutter 代码)。这样效率自然就提高了。

另外,假设后面产品发现界面有个位置需要调整,如果是 Android 或者 iOS 单独开发,则两个端都需要进行额外调整。

而 Flutter 就一套代码而已,所以相较之下 Flutter 更易维护。

官网关于 UI 的介绍 User interface

这边笔者按照自己的感受和认识进行说明。

读者看完之后有了个基本的认识,后续不管是阅读官方文档还是使用搜索引擎搜索相关问题,相信会事半功倍。

记住一句话:

Flutter 里面一切皆 Widget。

目录

1. 基本配置

我们紧接之前文章,现在进入 MyApp/sub/my_flutter 位置。

打开 main.dart。如果提示下图:

Dart support is not enabled for the project

我们点击右边第一个(Enabled Dart support)或者第二个(Open Dart settings)都是 OK 的。

如果点击第二个,需要配置 dart 的目录。

dart 的目录在 flutter 的 bin 目录下面的 cache 目录下面。

举个例子,笔者的 flutter bin 目录(terminal 执行which flutter)为/Users/nesger/Desktop/nesger_folder/flutter/flutter/bin/,那么 dart 目录就在/Users/nesger/Desktop/nesger_folder/flutter/flutter/bin/cache/dart-sdk

然后直接拷贝下面代码替换 main.dart 的代码。

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text(‘My Flutter‘),
          ),
          body: Center(),
        )
    );
  }
}

实际编译器可能会显示如下图,就是会有注释显示每个控件。

这有好处也有坏处。好处就是你可以看到哪一块是哪一个 Widget。坏处就是视觉干扰。

这个是自动产生的,不可删除。

可以通过如下操作控制是否显示:

Android Studio->Preferences->Editor->General->Appearance

2. main.dart 学习

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text(‘My Flutter‘),
          ),
          body: Center(),
        )
    );
  }
}

执行 flutter run 运行后可以看到下图:

对比上面代码可看到顶部蓝色区域是 AppBar 这个 Widget 来控制的。

你可以自行修改 Text 里面的内容然后按 r 键通过热重载看下效果。

我们可以看到,Flutter 里面的 dart 代码一个比较明显的地方就是一个 Widget 套着一个 Widget,有点树形的样子。

比如这里

我们尝试把 AppBar 去掉,可以看到界面显示就是一片纯白的界面。

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(),
        )
    );
  }
}

那么这里的 MaterialApp Widget 是不是必需的呢?

其实 MaterialApp 说明这个界面是按照 Material Design 的风格。

我们看下如果去掉会怎样?

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(),
    );
  }
}

所以说 Scaffold 这个 Widget 不能直接返回,我们需要给它外面套一层 MaterialApp。

可以看下这个链接:https://github.com/nesger/FlutterNote/issues/4

我们返回之前的状态,然后给他加一个 Hello World,看下怎样?

我们知道,Flutter 一切皆 Widget,所以需要显示 Hello World,就需要 Widget。

Widget 可以通过这个链接查看:https://flutter.io/docs/development/ui/widgets

可以看到 Text 这个 Widget

点击进入

再点击进入,可以看到介绍以及 Sample。

大家以后如果要看其他 Widget 也可以按照同样的方式学习。

当然如果时间要求比较紧的话,大家学完博客可以直接在搜索引擎输入关键字看下别人的 Sample,然后化用一下就没问题啦。

我们点击右边复制,然后简单修改如下:

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: Text(
              ‘Hello World!‘,
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
        ),
      ),
    );
  }
}

可以看到我们将其放到 Center 这个 Widget 里面,表示居中,同时作为它的一个 child。

大家可以试下去掉 Center 会怎样,直接将 Text 作为 body,如下:

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text(
          ‘Hello World!‘,
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

可以想象应该是不居中的。

到了这里你应该可以发现,我们整个页面其实是 body 对应的 Widget 来控制的。

上面我们的例子都是 MaterialApp,是不是一定只能这个 Widget 在最外层?

不是的,只是这里 Scaffold 跟它配对而已,我们可以修改如下:

import ‘package:flutter/material.dart‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        ‘Hello, world!‘,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  }
}

注意多了一行textDirection: TextDirection.ltr,没有会报错。

3. 以 Text 为例子初窥 Widget 写法

我们点进去 Text 源码看下,

对比一下上面我们的代码:

Text(
        ‘Hello, world!‘,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontWeight: FontWeight.bold),
      )

我们可以这样认为,括号里面的是待传入参数。其中没有花括号{}包裹的是必填项,有花括号{}的是选填项。

有花括号{}的在传入参数时需要指定参数,格式为参数:值。不同参数之间逗号分隔。

所以我们可以猜测上面 Center 下面的 child 应该是在花括号里面。所以才会有上面的写法,我们跟进去源码看看。

确实跟我们猜的一样。而且由于参数的类型是 Widget,所以可以传 Text 也是没问题的。

所以到这里你再回顾一下上面是不是就知道上面代码的写法了呢?

总结

由于 Flutter UI 内容比较多,讲起来篇幅会比较大。

所以我们会拆分成几篇文章进行讲解。

回顾一下,本篇文章主要讲解如下内容:

  1. dart sdk 配置和 dart 源代码括号后面编译器提示的显示和隐藏。
  2. 通过 main.dart 的修改初步熟悉 Flutter 界面的写法。
  3. 通过 Text 说明如何在官方文档上面查找控件和对应 Sample。
  4. 通过一个具体的小控件 Text 初窥 Flutter Widget 的写法和使用方法。

小彩蛋

这个彩蛋是微信群里一个小伙伴说到的。这里分享给大家。

简单说就是设置 Android Studio 的背景图。

先上图

大家觉得哪种更加赏心悦目呢?

可以根据自己的喜好确定是否设置。

设置方法为

其中 Opacity 是不透明度。

0 表示完全透明,跟没设置一样。100 表示完全不透明。

一般默认即可。

背景图公众号回复「ASBG」获取。

更多阅读:

Flutter 即学即用系列博客——01 环境搭建

Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

Flutter 即学即用系列博客——03 在旧有项目引入 Flutter

原文地址:https://www.cnblogs.com/nesger/p/10400012.html

时间: 2024-10-10 06:07:33

Flutter 即学即用系列博客——04 Flutter UI 初窥的相关文章

Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考

背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞═════════════════════════════════════════════════════════ flutter: The following message was thrown during layout: flutter: A RenderFlex overflowed by 826 pixels

Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明

前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC IDE:Android Studio 目录 1. 创建一个 Flutter 项目 第一步:主界面点击创建 Flutter 项目 第一步:如果已经打开项目,则通过 File->New->New Flutter Project... 创建 第二步:默认选择 Flutter Application 即可

窥探Swift系列博客说明及其Swift版本间更新

Swift到目前为止仍在更新,每次更新都会推陈出新,一些Swift旧版本中的东西在新Swift中并不适用,而且新版本的Swift会添加新的功能.到目前为止,Swift为2.1版本.去年翻译的Swift书籍是1.0版本,所以上面一些东西并不在适用.虽然Swift语言仍在更新,但是其整体的基础框架已经形成,大的改动应该不会有,版本的更新更多的是语言新功能的添加和完善,所以并不用担心现在学的Swift会过时.更新也就是在原有的基础上去更新,所以学学Swift还是很有必要的.新的Swift版本中引入了好

关于算法导论系列博客的说明

本系列博客主要为练习<算法导论(第三版)>的记录.发表目的在于希望通过大家的帮助,不断地改进程序,使其在时间和空间方面效率不断提高.由于水平有限,错误在所难免.但是,我一定尽力消除.另外, 欢迎大家指出错误,提出宝贵的建议,感谢大家的指点和帮助. 特别注明: 你们的评论对我是一种莫大的鼓励,哪怕一个字也好,万分感谢. 在开始之前,对各练习的程序作出统一说明,以后不再重复. 一  程序一般用C语言写,编译为GCC. 二   程序一般为子程序的形式,不提供调用主程序,只完成要求的功能. 三   不

Linux系列博客开篇

自从决定做开发,已经好久没有配置过Linux系统了.再不尝试着写一下博客,可能真的要还给老师了.本着一边复习,一边记录的原则,将一些Linux的配置和维护记录在此,不要贻笑大方才好. 为了完成接下来的这些博客,我可能会参考众多前辈的文章,我会尽量留下参考的出处,但是要是因为某些原因未能留下出处,还请原作者见谅.您可以联系我,我将及时改正. 按照我的计划,我会从Linux的安装.基本配置.常用命令开始,一直写到各种网络服务以及Linux存储集群.数据库集群等.基本思路按照尚观主机班的培训思路,不过

MVC系列博客之排球计分(一)需求分析

项目简介: 这是MVC系列博客之排球计分程序,该程序可以是对教练或者裁判使用的,让教练有权限对队员进行查询得分情况,让教练对队员的优势劣势进行了解,以便对队伍进行调整. 让裁判更好的判定比赛输赢. 需求分析:     作为一名排球教练,我需要统计对方球队的队员信息,得分情况,技能得分,以便能做出针对性的训练. 进入本程序后,需要选择身份,然后就可以对队员信息进行操作了.(增删改查) 本身份只能对本队队员进行操作,要想操作对方队员,只能退出程序,重新选择身份. 作为一名裁判,我需要对场上两队得分进

Android系列博客撰写计划

Android系列博客撰写计划 Hello,各位博友,大家好!小巫好久没写博客,由于工作的原因没有太多时间来把自己的开发经验总结出来,根据以往的博客,博文的发布都是没啥规律的,也没有定任何计划说要写一系列的博文,比较散乱.最近我自己也想了一下,改变以往博客的写法,少些一些功能性的博文,而多写一些架构性或者解决方案的博文,以方便广大初学者能更快的掌握重要的点,而不是盲目的去解决一个一个功能点,而没有形成一个整体的思想.以后的博文将会以我个人学习大牛的经验和我个人的经验来呈现给大家,我也希望通过这种

郭晓东的“系列博客,专辑”集锦

基础知识: 字符编码的奥秘[专辑],浏览其中一篇:字符编码的奥秘utf-8, Unicode <深度探索C++对象模型>[系列笔记]--对象模型.存储形式:默认构造函数一定会构造么? <深入理解计算机系统>[系列笔记]虚拟存储器,malloc,垃圾回收 <PNG文件格式>PNG文件格式分析 iOS平台知识: iOS开始学习[系列博客]Objective-c 语法,继承,protocol和delegate(iOS学习笔记,从零开始) Objective-c高效变成[专辑]

webapi框架搭建系列博客

webapi框架搭建系列博客 webapi框架搭建-创建项目(一) webapi框架搭建-创建项目(二)-以iis为部署环境的配置 webapi框架搭建-创建项目(三)-webapi owin webapi框架搭建-依赖注入之autofac webapi框架搭建-日志管理log4net webapi框架搭建-webapi异常处理 原文地址:https://www.cnblogs.com/shengyu-kmust/p/8279300.html