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，有些地方還不是很理解，希望以后接觸的多了，可以豁然開朗吧?。?！給大家看一下效果圖：
•圖標(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)文章
java8新特性 stream流的方式遍歷集合和數(shù)組操作
這篇文章主要介紹了java8新特性 stream流的方式遍歷集合和數(shù)組操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
蒙特·卡羅方法（Monte Carlo method），也稱統(tǒng)計模擬方法，是一種以概率統(tǒng)計理論為基礎(chǔ)的數(shù)值計算方法。本文將利用該方法實現(xiàn)圓周率的計算，需要的可以參考一下2022-08-08
這篇文章主要介紹了如何使用Reactor完成類似Flink的操作，幫助大家更好的理解和學(xué)習(xí)使用Java，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了Java Web中解決路徑問題的相關(guān)資料,java 文件路徑有絕對路徑與相對路徑，這里提供了幾種方法解決所有路徑問題，需要的朋友可以參考下2017-01-01
Java與C++實現(xiàn)相同的MD5加密算法簡單實例
下面小編就為大家?guī)硪黄狫ava與C++實現(xiàn)相同的MD5加密算法簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
在本篇文章里小編給大家整理的是關(guān)于Java包裝類之實體類不要使用基本類型的知識點內(nèi)容，需要的朋友們可以學(xué)習(xí)下。2020-02-02
淺談Java之Map 按值排序 (Map sort by value)
下面小編就為大家?guī)硪黄獪\談Java之Map 按值排序 (Map sort by value)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
在項目開發(fā)中，肯定少不了異常的出現(xiàn)，作為后臺開發(fā)人員，我們總是在不停的寫各種接口提供給前端調(diào)用，然而不可避免的，當(dāng)后臺出現(xiàn)BUG時，前端總是丑陋的講錯誤信息直接暴露給用戶，這樣的用戶體驗想必是相當(dāng)差的，本文主要講解異常映射的配置2021-06-06
這篇文章主要和大家一起對Java Web錯誤/異常處理頁面進(jìn)行分析研究，感興趣的小伙伴們可以參考一下2016-03-03
解讀SpringBoot中addCorsMappings配置跨域與攔截器互斥問題的原因
這篇文章主要介紹了解讀SpringBoot中addCorsMappings配置跨域與攔截器互斥問題的原因,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12