Flutter實現(xiàn)文本組件、圖標及按鈕組件的代碼
•文本組件
文本組件(text)負責顯示文本和定義顯示樣式,下表為text常見屬性
Text組件屬性及描述
屬性名 | 類型 | 默認值 | 說明 |
data | String | 要顯示的文本 | |
maxLines | int | 0 | 文本要顯示的最大行數(shù) |
style | TextStyle | null | 文本樣式,可定義文本的字體大小、顏色、粗細等 |
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,有些地方還不是很理解,希望以后接觸的多了,可以豁然開朗吧!??!給大家看一下效果圖:
•圖標及按鈕組件
•圖標組件
圖標組件(Icon)為展示圖標的組件,該組件不可交互,要實現(xiàn)可交互,可以考慮使用IconButton組件,圖標組件相關(guān)的組件有一下幾個:
1.IconButton:可交互的Icon
2.Icons:框架自帶Icon集合
3.IconTheme:Icon主題
4.ImageIcon:通過AssetImages或者其他圖片顯示Icon
圖標組件常用屬性表
屬性名 | 類型 | 默認值 | 說明 |
color | Color | null | 圖標的顏色 |
icon | IconData | null | 展示的具體圖標,可以使用Icons圖標列表中的任意一個圖標即可,如Icons.phone表示一個電話的圖標 |
style | TextStyle | null | 文本樣式 |
size | Double | 24.0 | 圖標的大小,注意要帶上小數(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: '圖標組件Demo', home: new IconDemo(), ); } } class IconDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('圖標組件Demo'), ), body: new Center( child: new Icon( Icons.android,//圖標Icon color: Colors.green,//圖標顏色,設(shè)置為綠色,原本的顏色是黑色的 size: 150.0,//Icon的大小 ), ), ); } }
附上效果截圖:
•圖標按鈕組件
圖標按鈕組件(IconButton)是基于Material Design風格的組件,他可以響應(yīng)按下事件,并且按下時會帶一個水波紋的效果,如果它的onPressed回調(diào)函數(shù)為null,那么這個按鈕處于禁用的狀態(tài),并且不可以按下。
IconButton組件屬性及描述
屬性名 | 類型 | 默認值 | 說明 |
alignment | AlignmentGeometry | Alignment.center | 定義IconButton的Icon對齊方式,默認為居中,Alignment是可以設(shè)置x,y偏移量的 |
icon | Widget | null | 展示的具體圖標,可以使用Icons圖標列表中的任意一個圖標 |
color | Color | null | 圖標顏色 |
disabledColor | Color | ThemeData.disableColor | 圖標組件禁用的顏色 |
iconSize | double | 24.0 | 圖標大小 |
onPressed | VoidCallBack | null | 當按鈕按下時會觸發(fā)此回調(diào)事件 |
tooltip | String | “” | 當按鈕按下時的組件提示語 |
寫一個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的左右增加了兩個圖片,當然你也可以對其設(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)的圖標,那么如果一個按鈕上需要我們添加自定義的文本,這樣的按鈕要怎么實現(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)文本組件、圖標及按鈕組件的代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
java8新特性 stream流的方式遍歷集合和數(shù)組操作
這篇文章主要介紹了java8新特性 stream流的方式遍歷集合和數(shù)組操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08Java與C++實現(xiàn)相同的MD5加密算法簡單實例
下面小編就為大家?guī)硪黄狫ava與C++實現(xiàn)相同的MD5加密算法簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09淺談Java之Map 按值排序 (Map sort by value)
下面小編就為大家?guī)硪黄獪\談Java之Map 按值排序 (Map sort by value)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08解讀SpringBoot中addCorsMappings配置跨域與攔截器互斥問題的原因
這篇文章主要介紹了解讀SpringBoot中addCorsMappings配置跨域與攔截器互斥問題的原因,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12