Flutter實現(xiàn)文本組件、圖標(biāo)及按鈕組件的代碼
更新時間：2019年07月26日 10:36:20 作者：CurtisWgh
這篇文章主要介紹了Flutter實現(xiàn)文本組件、圖標(biāo)及按鈕組件的代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下
•文本組件
文本組件（text）負(fù)責(zé)顯示文本和定義顯示樣式，下表為text常見屬性
Text組件屬性及描述
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
| data | String | 要顯示的文本 | |
| maxLines | int | 0 | 文本要顯示的最大行數(shù) |
| style | TextStyle | null | 文本樣式，可定義文本的字體大小、顏色、粗細(xì)等 |
| textAlign | TextAlign | TextAlign.center | 文本水平方向的對齊方式，取值有center、end、justify、left、right、start、values |
| textDirection | TextDirection | TextDirection.ltr | 文本的書寫方向，如從左到右、從右到左 |
| textScaleFactor | double | 1.0 | 字體的縮放系數(shù)，比如，如果此屬性設(shè)置的值為1.5，那么字體會被放大到150%，也就是說比原來大了50% |
| textSpan | TextSpan | null | 文本塊，TextSpan里可以包含文本內(nèi)容及樣式 |
老樣子，按照慣例附上Demo，創(chuàng)建多個文本組件來展示不同的文本樣式，比如不同的顏色，不同的自號，不同的線形等。
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '文本組件Demo',
home: new Scaffold(
appBar: new AppBar(
title: Text('文本組件Demo'),
),
body: new Column(
children: <Widget>[
new Text(
'第一個文本Demo',
style: new TextStyle(
color: Colors.amberAccent,
fontSize: 20,
),
),
new Text(
'第二個文本Demo',
style: new TextStyle(
color: Colors.deepOrange,
fontSize: 20,
),
textScaleFactor: 1.5,//放大50%
),
new Text(
'第三個文本Demo（瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的）',
style: new TextStyle(
color: Colors.blue,
fontSize: 20,
),
textAlign: TextAlign.end,//右對齊
),
new Text(
'''第四個文本Demo
換到第二行，看看能不能顯示的出來呢''',
style: new TextStyle(
fontSize: 20,
color: Colors.green,
),
maxLines: 2,//最大顯示2行
),
new Text(
'第五個Demo，設(shè)置水平方向文案超出屏幕后，顯示...（瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字）',
style: new TextStyle(
fontSize: 20,
color: Colors.black,
),
overflow: TextOverflow.ellipsis,//水平方向超出屏幕顯示...
)
],
),//垂直方向排列
),
);
}
}
除了這些，還有很多其他的屬性等著我們?nèi)L試，我就不一一都寫出來了，我也是剛開始接觸Flutter，有些地方還不是很理解，希望以后接觸的多了，可以豁然開朗吧?。。〗o大家看一下效果圖：
•圖標(biāo)及按鈕組件
•圖標(biāo)組件
圖標(biāo)組件（Icon）為展示圖標(biāo)的組件，該組件不可交互，要實現(xiàn)可交互，可以考慮使用IconButton組件，圖標(biāo)組件相關(guān)的組件有一下幾個：
1.IconButton：可交互的Icon
2.Icons：框架自帶Icon集合
3.IconTheme：Icon主題
4.ImageIcon：通過AssetImages或者其他圖片顯示Icon
圖標(biāo)組件常用屬性表
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
| color | Color | null | 圖標(biāo)的顏色 |
| icon | IconData | null | 展示的具體圖標(biāo)，可以使用Icons圖標(biāo)列表中的任意一個圖標(biāo)即可，如Icons.phone表示一個電話的圖標(biāo) |
| style | TextStyle | null | 文本樣式 |
| size | Double | 24.0 | 圖標(biāo)的大小，注意要帶上小數(shù)位 |
| textDirection | TextDirection | TextDirection.ltr | 文本排列方向 |
附上Demo代碼：
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: '圖標(biāo)組件Demo',
home: new IconDemo(),
);
}
}
class IconDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('圖標(biāo)組件Demo'),
),
body: new Center(
child: new Icon(
Icons.android,//圖標(biāo)Icon
color: Colors.green,//圖標(biāo)顏色，設(shè)置為綠色，原本的顏色是黑色的
size: 150.0,//Icon的大小
),
),
);
}
}
附上效果截圖：
•圖標(biāo)按鈕組件
圖標(biāo)按鈕組件（IconButton）是基于Material Design風(fēng)格的組件，他可以響應(yīng)按下事件，并且按下時會帶一個水波紋的效果，如果它的onPressed回調(diào)函數(shù)為null，那么這個按鈕處于禁用的狀態(tài)，并且不可以按下。
IconButton組件屬性及描述
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
| alignment | AlignmentGeometry | Alignment.center | 定義IconButton的Icon對齊方式，默認(rèn)為居中，Alignment是可以設(shè)置x，y偏移量的 |
| icon | Widget | null | 展示的具體圖標(biāo)，可以使用Icons圖標(biāo)列表中的任意一個圖標(biāo) |
| color | Color | null | 圖標(biāo)顏色 |
| disabledColor | Color | ThemeData.disableColor | 圖標(biāo)組件禁用的顏色 |
| iconSize | double | 24.0 | 圖標(biāo)大小 |
| onPressed | VoidCallBack | null | 當(dāng)按鈕按下時會觸發(fā)此回調(diào)事件 |
| tooltip | String | “” | 當(dāng)按鈕按下時的組件提示語 |
寫一個Demo，實現(xiàn)點擊IconButton，出發(fā)onPressed回調(diào)并toast一句話，附上Demo代碼：
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'IconButtonDemo',
home: new IconButtonDemo(),
);
}
}
class IconButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('IconButton Demo'),
leading: Icon(Icons.menu),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
)
],
),
body: new Center(
child: new IconButton(
icon: Icon(Icons.add_circle_outline),
iconSize: 50.0,
tooltip: '用戶按下了按鈕',
disabledColor: Colors.green,
onPressed: (){
Fluttertoast.showToast(
msg: '點擊了IconButton并且Toas了一句話',
toastLength: Toast.LENGTH_LONG,
textColor: Colors.deepOrange,
gravity: ToastGravity.BOTTOM
);
}),
),
);
}
}
附上效果截圖：
上面的代碼除了演示了IconButton的簡單使用，還對AppBar做了一些出了，在title的左右增加了兩個圖片，當(dāng)然你也可以對其設(shè)置點擊事件
注：這里和大家說一下在Flutter中怎么Toast出提示語，首先在pubspec.yaml引入fluttertoast包，點擊Packages get，然后在你需要toast的地方import該庫
//pubspec.yaml fluttertoast: ^2.2.11 //import對應(yīng)庫 import 'package:fluttertoast/fluttertoast.dart';
• 凸起按鈕組件
突起按鈕組件（RaisedButton），往往我們在開發(fā)過程中，不會一直用系統(tǒng)的圖標(biāo)，那么如果一個按鈕上需要我們添加自定義的文本，這樣的按鈕要怎么實現(xiàn)呢？
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'IconButtonDemo',
home: new IconButtonDemo(),
);
}
}
class IconButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('IconButton Demo'),
leading: Icon(Icons.menu),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
)
],
),
body: new Center(
child: new RaisedButton(
padding: const EdgeInsets.all(10.0),//內(nèi)間距
splashColor: Colors.blue,//點擊時按鈕的顏色
elevation: 10,
shape: BeveledRectangleBorder(//帶斜角的長方形邊框
borderRadius: BorderRadius.all(Radius.circular(5))//圓角
),
onPressed: (){
Fluttertoast.showToast(
msg: '點擊了IconButton并且Toas了一句話',
toastLength: Toast.LENGTH_LONG,
textColor: Colors.deepOrange,
gravity: ToastGravity.BOTTOM
);
},
//按鈕內(nèi)的文本
child: new Text(
'我是RaisedButton按鈕',
style: TextStyle(
color: Colors.green,
fontSize: 20.0,
),
),
),
),
);
}
}
附上效果截圖：
總結(jié)
以上所述是小編給大家介紹的Flutter實現(xiàn)文本組件、圖標(biāo)及按鈕組件的代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
SpringBoot使用Scheduling實現(xiàn)定時任務(wù)的示例代碼
Spring Boot提供了一種方便的方式來實現(xiàn)定時任務(wù),即使用Spring的@Scheduled注解,通過在方法上添加@Scheduled注解,我們可以指定方法在何時執(zhí)行,本文我們就給大家介紹一下SpringBoot如何使用Scheduling實現(xiàn)定時任務(wù),需要的朋友可以參考下2023-08-08
在JAVA類中使用super來引用父類的成分，用this來引用當(dāng)前對象，如果一個類從另外一個類繼承，我們new這個子類的實例對象的時候，這個子類對象里面會有一個父類對象。怎么引用里面的父類對象呢？用super來引用，this指當(dāng)前對象的引用，super是當(dāng)前對象里面的父對象的引用2021-11-11
SpringBoot 如何使用RestTemplate發(fā)送Post請求
這篇文章主要介紹了SpringBoot 如何使用RestTemplate發(fā)送Post請求的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-08-08
這篇文章主要介紹了用java在web環(huán)境下上傳和下載文件的技巧的相關(guān)資料2016-01-01
Java?多個文件生成zip包、下載zip包的實現(xiàn)代碼
這篇文章主要介紹了Java?多個文件生成zip包、下載zip包，包括文件上傳，文件下載，多個文件打成zip包的操作代碼，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Java鉤子方法概念原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
文章描述了在使用IntelliJ IDEA時遇到的問題,并提出了解決方法：關(guān)閉IDEA、刪除項目中的.idea文件夾,然后重新打開IDEA導(dǎo)入項目2024-11-11
這篇文章主要介紹了Java開發(fā)中的容器概念、分類與用法,結(jié)合實例形式較為詳細(xì)的分析了java容器的相關(guān)概念、分類、使用方法與注意事項,需要的朋友可以參考下2017-11-11
關(guān)于SpringSecurity?Context?中獲取和更改當(dāng)前用戶信息的問題
SpringSecurityContext在異步線程中無法獲取用戶信息,因其與請求線程綁定；此外,用戶信息更新后跳轉(zhuǎn)頁面時,身份會被降級為匿名,導(dǎo)致信息無法及時同步,本文給大家介紹SpringSecurity?Context?中獲取和更改當(dāng)前用戶信息的問題,感興趣的朋友一起看看吧2024-09-09
這篇文章主要介紹了Java信號量Semaphore原理及代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10