作為Flutter最基本的文本組件,也是最通用的組件,在最開始學(xué)習(xí)就把建立一個Flutter程序的結(jié)構(gòu)熟悉一下
下面一個簡單的demo,我們大致把這個Flutter程序分為3個區(qū)塊
- 引入
flutter/material.dart視覺組件 - 建立一個入口函數(shù)
mian()通過runApp()把我們的主體內(nèi)容傳入到這個函數(shù) - 在
Flutter中,萬物皆組件.建立剛才第二步傳入的這個自定義主件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '這里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('這里是title')
),
body: Center(
child: Text('這里是正文'),
)
),
);
}
}
在自定義組件中,通過build方法來構(gòu)建組件內(nèi)容
在上面的demo中,這個組件主要包含兩個部分
- title 此處的title并不是app頂部的文字部分
- home 頁面顯示的內(nèi)容其中Scaffold函數(shù)中的
appBar方法傳入的title用于app頂部顯示內(nèi)容,而body則作為app正文部分展示,此處Center做為一個布局單位,在以后會經(jīng)常用,child則是子元素的意思.
我們發(fā)現(xiàn)凡是需要顯示文字的地方,都可以使用Text()組件顯示
image.png
textAlign 水平對齊方式
在Text組件中,都可以使用textAlign屬性進(jìn)行文字對齊.使用上和CSS類似,但是需要注意的是如果直接寫textAlign:center編譯器是會報(bào)錯的.正確寫法應(yīng)該是textAlign: TextAlign.center
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '這里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('這里是title')
),
body: Center(
child: Text(
'經(jīng)過對windows和mac系統(tǒng)安裝Flutter環(huán)境對比發(fā)現(xiàn),mac系統(tǒng)安裝Flutter需要對mac系統(tǒng)環(huán)境變量的配置方法'
',以及安卓sdk的使用更加熟悉,否則會踩很多坑',
textAlign: TextAlign.center,
),
)
),
);
}
}
APP界面:
image.png
舉一反三:TextAlign的屬性
- left 左對齊
- center 居中
- right 右對齊
- start 從開始的位置對齊(類似左對齊)
- end 結(jié)尾處對齊(類似右對齊)
maxLines 最大顯示行數(shù) 以及 overflow 溢出處理
在實(shí)際項(xiàng)目中,在列表頁有時候需要只顯示1行或者兩行的文字那么,我們可以引入maxLines屬性,后面跟的數(shù)字單位為行,例如1就是只顯示一行的意思
child: Text(
'經(jīng)過對windows和mac系統(tǒng)安裝Flutter環(huán)境對比發(fā)現(xiàn),mac系統(tǒng)安裝Flutter需要對mac系統(tǒng)環(huán)境變量的配置方法以及安卓sdk的使用更加熟悉,否則會踩很多坑',
textAlign: TextAlign.center,
maxLines: 1,
),
但是我們發(fā)現(xiàn)在app中,文字確實(shí)只顯示了一行,但是很生硬的切除了.這里我們就引入了另外一個是屬性:overflow
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '這里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('這里是title')
),
body: Center(
child: Text(
'經(jīng)過對windows和mac系統(tǒng)安裝Flutter環(huán)境對比發(fā)現(xiàn),mac系統(tǒng)安裝Flutter需要對mac系統(tǒng)環(huán)境變量的配置方法'
',以及安卓sdk的使用更加熟悉,否則會踩很多坑',
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.clip,
),
)
),
);
}
}
上面demo中,我們使用了overflow: TextOverflow.clip,對溢出的文本進(jìn)行處理.那么屬性都代表的意思:
- TextOverflow.clip 生硬的切掉多余部分
- TextOverflow.ellipsis 在文本的最后加'...'
-
TextOverflow.fade 文字從上到下漸變消失
TextOverflow.fade效果:
image.png
style屬性
在text組件中,style屬性最為繁瑣,因?yàn)閷ξ淖值拇笮?顏色之類的設(shè)置都是在這里完成的,下面通過一個demo,來簡單的實(shí)現(xiàn)一些對文字的處理
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '這里是beline的app',
home: Scaffold(
appBar: AppBar(
title: Text('這里是title')
),
body: Center(
child: Text(
'經(jīng)過對windows和mac系統(tǒng)安裝Flutter環(huán)境對比發(fā)現(xiàn),mac系統(tǒng)安裝Flutter需要對mac系統(tǒng)環(huán)境變量的配置方法'
',以及安卓sdk的使用更加熟悉,否則會踩很多坑',
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.fade,
style: TextStyle(
fontSize: 25.0, //- 設(shè)置文字的大小
color: Color.fromARGB(255, 255, 123, 122), //- 設(shè)置字體顏色
decoration: TextDecoration.underline, //- 文字下面加下劃線
decorationStyle: TextDecorationStyle.solid, //- 實(shí)線
)
),
)
),
);
}
}
app展示
image.png
