項目搭建
上篇文章結(jié)尾處介紹了，flutter目錄結(jié)構(gòu)。但是沒有將項目如何創(chuàng)建。這兒簡單提下吧！
首先打開AS開發(fā)工具，如果你已經(jīng)成功安裝flutter插件那么會出現(xiàn)如下按鈕：
然后出現(xiàn)如下界面：
選擇第一個，然后點擊next。
- 在1處輸入項目名稱，全部小寫，用下劃線分割。
- 在2處選擇之前解壓的Flutter SDK目錄
- 在3處選擇項目創(chuàng)建的位置。
- 在4處填寫這個項目的描述
然后點擊next。
- 在1處輸入項目包名，這個和java一樣。
- 在2、3處確認是否需要Android和iOS的支持。勾上吧！管他后面用不用！
至此，項目的創(chuàng)建就已經(jīng)完成了。
Text Widget組件學(xué)習(xí)
我們打開lib目錄下會發(fā)現(xiàn)一個main.dart文件，這個目錄下就是存放flutter代碼的地方，dart是它的開發(fā)語言。打開main.dart文件你會發(fā)現(xiàn)已經(jīng)生成了很多現(xiàn)成的代碼，注釋一大篇。如果我們直接運行此時的項目，如下顯示：
屏幕中間就顯示了一段英文，和一個數(shù)字。點擊右下角的按鈕數(shù)字還能變。這個顯示這個數(shù)字和一段英文的控件就是Text Widget。
由于自動生成的代碼太復(fù)雜，太多了，我們將其簡化一下：
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
),
),
);
}
}
第一處導(dǎo)入我們需要的包，因為下面用到了MaterialApp，這個和java導(dǎo)包差不多。
第二處定義一個main方法，調(diào)用runApp方法來開啟一個widget，由于只有一行代碼我們可以使用 =>來調(diào)用方法。
第三處類似java一樣，通過class關(guān)鍵字創(chuàng)建一個為MyApp的類。該類通過關(guān)鍵字extends繼承了StatelessWidget類需要我們重寫。
第四處由于繼承了抽象類StatelessWidget，因此需要我們重寫其build()方法。該方法返回一個Widget，并且包含一個BuildContext上下分參數(shù)。在方法里面我們可以返回任何Widget。我們使用了MaterialApp這個Widget。
運行效果如下：
我們發(fā)現(xiàn)在我們的右上角有個debug的角標，看起來非常難受。我們可以去掉它。在MaterialApp添加如下代碼：
return MaterialApp(
debugShowCheckedModeBanner: false, //右上角不顯示DEBUG字樣
);
Text Widget介紹
一系列具有單一樣式的文本。
“文本”小組件顯示單個樣式的文本字符串。 字符串可能會跨越多行，也可能全部顯示在同一行上，具體取決于布局約束。
style參數(shù)是可選的。 省略時，文本將使用最接近的DefaultTextStyle中的樣式。 如果給定樣式的TextStyle.inherit屬性為true（默認值），則給定樣式將與最接近的DefaultTextStyle合并。 例如，這種合并行為很有用，可以在使用默認字體系列和大小時使文本變?yōu)榇煮w。
Text Widget屬性介紹
-
style 文本樣式
我們可以通過設(shè)置style的方式設(shè)置大小和顏色。
將第五處代碼，改為如下：
child: Text(
"中國人牛逼",
style: TextStyle(
color: Colors.blue,
fontSize: 50.0)
),
效果如下：
注：TextStyle提供了非常多得屬性，可以讓我們實現(xiàn)更加生動的Text文本組件。大家可以自行學(xué)習(xí)。
- textAlign 文本水平對齊方式
可以使用TextAlign的枚舉項設(shè)置水平對齊方式。如下：
body: Center(
child: Text(
"中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textAlign: TextAlign.right,
),
),
效果如下：
-
textDirection文本排版的方向
可以設(shè)置文本的從左到右，或者從右到左。和TextAlign.right 、TextAlign.left類似。
textDirection: TextDirection.rtl//TextDirection.ltr
locale加載本地字體庫
softWrap文本滿一行是否換行
softWrap: false //不換行，單行顯示
maxLines 最大顯示行數(shù)
overflow 超過設(shè)置的最大顯示行數(shù)時如何顯示
body: Center(
child: Text(
"中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼中國人牛逼",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
maxLines: 2,
overflow: TextOverflow.ellipsis, //超出部分顯示省略號
),
),
textScaleFactor 指定字體的邏輯像素大?。s放因子）
比如，原本文字顯示是20像素，如果你設(shè)置了縮放因子為0.5。則實際為原字體大小的一半。semanticsLabel 對文本內(nèi)容的解釋性說明，比如：
child: Text('DSA',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
maxLines: 2,
overflow: TextOverflow.ellipsis,
//超出部分顯示省略號
semanticsLabel: '數(shù)據(jù)結(jié)構(gòu)與算法'),
),
即解釋'DSA'是數(shù)據(jù)結(jié)構(gòu)與算法的簡寫
TextStyle認識
在上面文章中，我們認識了這個類可以實現(xiàn)更加生動的Text文本組件，它有如下屬性：
這兒就拿幾個用得比較多得屬性來進行講解吧。比如設(shè)置字體大小，字間距，字體顏色，下劃線，下劃線樣式，下劃線顏色。其余的留給大家自己動手學(xué)習(xí)。
home: Scaffold(
appBar: AppBar(
title: Text("Hello World"),
),
body: Center(
child: Text(
'數(shù)據(jù)結(jié)構(gòu)與算法數(shù)據(jù)結(jié)構(gòu)與算法數(shù)據(jù)結(jié)構(gòu)與算法數(shù)據(jù)結(jié)構(gòu)與算法數(shù)據(jù)結(jié)構(gòu)與算法數(shù)據(jù)結(jié)構(gòu)與算法數(shù)據(jù)結(jié)構(gòu)與算法',
//超出部分顯示省略號
style: TextStyle(
color: Colors.blue,
fontSize: 20.0,
letterSpacing:5.0,
decoration: TextDecoration.underline, //下劃線
decorationStyle: TextDecorationStyle.dashed, //虛線
decorationColor: Colors.red),
),
),
),
效果如下：
- 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)),
],
),
),
注：也可以使用RichText來實現(xiàn)這種效果。
實現(xiàn)狀態(tài)欄一體化
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);
}
}
效果如下：
