(2)、Study Flutter项目创建和Text Widge

2019-03-01 本文已影响0人北有花开

项目搭建

上篇文章结尾处介绍了，flutter目录结构。但是没有将项目如何创建。这儿简单提下吧！
首先打开AS开发工具，如果你已经成功安装flutter插件那么会出现如下按钮：

QQ截图20190105142839.png

然后出现如下界面：

QQ截图20190105142856.png

选择第一个，然后点击next。

QQ截图20190105142955.png

在1处输入项目名称，全部小写，用下划线分割。
在2处选择之前解压的Flutter SDK目录
在3处选择项目创建的位置。
在4处填写这个项目的描述

然后点击next。

QQ截图20190105143019.png

在1处输入项目包名，这个和java一样。
在2、3处确认是否需要Android和iOS的支持。勾上吧！管他后面用不用！

至此，项目的创建就已经完成了。

Text Widget组件学习

我们打开lib目录下会发现一个main.dart文件，这个目录下就是存放flutter代码的地方，dart是它的开发语言。打开main.dart文件你会发现已经生成了很多现成的代码，注释一大篇。如果我们直接运行此时的项目，如下显示：

QQ截图20190105144551.png

屏幕中间就显示了一段英文，和一个数字。点击右下角的按钮数字还能变。这个显示这个数字和一段英文的控件就是Text Widget。

由于自动生成的代码太复杂，太多了，我们将其简化一下：

import 'package:flutter/material.dart'; //1

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

class MyApp extends StatelessWidget {  //3
  @override
  Widget build(BuildContext context) { //4
    return MaterialApp(
      title: "入门例子",
      theme: ThemeData(
        primaryColor: Colors.red
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello World"),
        ),
        body: Center(
          child: Text("中国人牛逼"), //5
        ),
      ),
    );
  }
}

第一处导入我们需要的包，因为下面用到了MaterialApp，这个和java导包差不多。
第二处定义一个main方法，调用runApp方法来开启一个widget，由于只有一行代码我们可以使用 =>来调用方法。
第三处类似java一样，通过class关键字创建一个为MyApp的类。该类通过关键字extends继承了StatelessWidget类需要我们重写。
第四处由于继承了抽象类StatelessWidget，因此需要我们重写其build()方法。该方法返回一个Widget，并且包含一个BuildContext上下分参数。在方法里面我们可以返回任何Widget。我们使用了MaterialApp这个Widget。

运行效果如下：

QQ截图20190105155416.png

我们发现在我们的右上角有个debug的角标，看起来非常难受。我们可以去掉它。在MaterialApp添加如下代码：

return MaterialApp(
      debugShowCheckedModeBanner: false, //右上角不显示DEBUG字样
);

Text Widget介绍

一系列具有单一样式的文本。

“文本”小组件显示单个样式的文本字符串。字符串可能会跨越多行，也可能全部显示在同一行上，具体取决于布局约束。

style参数是可选的。省略时，文本将使用最接近的DefaultTextStyle中的样式。如果给定样式的TextStyle.inherit属性为true（默认值），则给定样式将与最接近的DefaultTextStyle合并。例如，这种合并行为很有用，可以在使用默认字体系列和大小时使文本变为粗体。

Text Widget属性介绍

QQ截图20190105165829.png

style 文本样式
我们可以通过设置style的方式设置大小和颜色。
将第五处代码，改为如下：

child: Text(
            "中国人牛逼",
            style: TextStyle(
                color: Colors.blue,
                fontSize: 50.0)
          ),

效果如下：

QQ截图20190105155831.png

注：TextStyle提供了非常多得属性，可以让我们实现更加生动的Text文本组件。大家可以自行学习。

textAlign 文本水平对齐方式

可以使用TextAlign的枚举项设置水平对齐方式。如下：

body: Center(
          child: Text(
            "中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼",
            style: TextStyle(color: Colors.blue, fontSize: 20.0),
            textAlign: TextAlign.right,
          ),
        ),

效果如下：

QQ截图20190105161656.png

textDirection文本排版的方向
可以设置文本的从左到右，或者从右到左。和TextAlign.right 、TextAlign.left类似。

textDirection: TextDirection.rtl//TextDirection.ltr

locale加载本地字体库
softWrap文本满一行是否换行

 softWrap: false //不换行，单行显示

maxLines 最大显示行数
overflow 超过设置的最大显示行数时如何显示

body: Center(
          child: Text(
            "中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼中国人牛逼",
            style: TextStyle(color: Colors.blue, fontSize: 20.0),
            maxLines: 2,
            overflow: TextOverflow.ellipsis, //超出部分显示省略号
          ),
        ),

QQ截图20190105164540.png

textScaleFactor 指定字体的逻辑像素大小（缩放因子）
比如，原本文字显示是20像素，如果你设置了缩放因子为0.5。则实际为原字体大小的一半。
semanticsLabel 对文本内容的解释性说明，比如：

child: Text('DSA',
              style: TextStyle(color: Colors.blue, fontSize: 20.0),
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              //超出部分显示省略号
              semanticsLabel: '数据结构与算法'),
        ),

即解释'DSA'是数据结构与算法的简写

TextStyle认识

在上面文章中，我们认识了这个类可以实现更加生动的Text文本组件，它有如下属性：

QQ截图20190105165748.png

这儿就拿几个用得比较多得属性来进行讲解吧。比如设置字体大小，字间距，字体颜色，下划线，下划线样式，下划线颜色。其余的留给大家自己动手学习。

 home: Scaffold(
        appBar: AppBar(
          title: Text("Hello World"),
        ),
        body: Center(
          child: Text(
            '数据结构与算法数据结构与算法数据结构与算法数据结构与算法数据结构与算法数据结构与算法数据结构与算法',
            //超出部分显示省略号
            style: TextStyle(
                color: Colors.blue,
                fontSize: 20.0,
                letterSpacing:5.0,
                decoration: TextDecoration.underline, //下划线
                decorationStyle: TextDecorationStyle.dashed, //虚线
                decorationColor: Colors.red),
          ),
        ),
      ),

效果如下：

QQ截图20190105171325.png

Text.rich的使用

const Text.rich(
              TextSpan(
                text: 'Hello', // default text style
                children: <TextSpan>[
                  TextSpan(
                      text: ' beautiful ',
                      style: TextStyle(
                          fontStyle: FontStyle.italic, fontSize: 20.0)),
                  TextSpan(
                      text: 'world',
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 30.0,
                          color: Colors.red)),
                ],
              ),
            ),

QQ截图20190111171615.png

注：也可以使用RichText来实现这种效果。

实现状态栏一体化

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

效果如下：

QQ截图20190105171634.png

(2)、Study Flutter项目创建和Text Widge

项目搭建

Text Widget组件学习

Text Widget介绍

Text Widget属性介绍

TextStyle认识

实现状态栏一体化

猜你喜欢

热点阅读