快捷導(dǎo)航

Flutter實(shí)現(xiàn)文本組件、圖標(biāo)及按鈕組件的代碼

更新時(shí)間：2019年07月26日 10:36:20 作者：CurtisWgh

這篇文章主要介紹了Flutter實(shí)現(xiàn)文本組件、圖標(biāo)及按鈕組件的代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

•文本組件

文本組件（text）負(fù)責(zé)顯示文本和定義顯示樣式，下表為text常見屬性

Text組件屬性及描述

屬性名	類型	默認(rèn)值	說(shuō)明
data	String		要顯示的文本
maxLines	int	0	文本要顯示的最大行數(shù)
style	TextStyle	null	文本樣式，可定義文本的字體大小、顏色、粗細(xì)等
textAlign	TextAlign	TextAlign.center	文本水平方向的對(duì)齊方式，取值有center、end、justify、left、right、start、values
textDirection	TextDirection	TextDirection.ltr	文本的書寫方向，如從左到右、從右到左
textScaleFactor	double	1.0	字體的縮放系數(shù)，比如，如果此屬性設(shè)置的值為1.5，那么字體會(huì)被放大到150%，也就是說(shuō)比原來(lái)大了50%
textSpan	TextSpan	null	文本塊，TextSpan里可以包含文本內(nèi)容及樣式

老樣子，按照慣例附上Demo，創(chuàng)建多個(gè)文本組件來(lái)展示不同的文本樣式，比如不同的顏色，不同的自號(hào)，不同的線形等。

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(
    '第一個(gè)文本Demo',
    style: new TextStyle(
    color: Colors.amberAccent,
    fontSize: 20,
    ),
   ),
   new Text(
    '第二個(gè)文本Demo',
    style: new TextStyle(
    color: Colors.deepOrange,
    fontSize: 20,
    ),
    textScaleFactor: 1.5,//放大50%
   ),
   new Text(
    '第三個(gè)文本Demo（瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的瞎寫的）',
    style: new TextStyle(
    color: Colors.blue,
    fontSize: 20,
    ),
    textAlign: TextAlign.end,//右對(duì)齊
   ),
   new Text(
    '''第四個(gè)文本Demo
    換到第二行，看看能不能顯示的出來(lái)呢''',
    style: new TextStyle(
    fontSize: 20,
    color: Colors.green,
    ),
    maxLines: 2,//最大顯示2行
   ),
   new Text(
    '第五個(gè)Demo，設(shè)置水平方向文案超出屏幕后，顯示...（瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字）',
    style: new TextStyle(
    fontSize: 20,
    color: Colors.black,
    ),
    overflow: TextOverflow.ellipsis,//水平方向超出屏幕顯示...
   )
   ],
  ),//垂直方向排列
  ),
 );
 }
}

除了這些，還有很多其他的屬性等著我們?nèi)L試，我就不一一都寫出來(lái)了，我也是剛開始接觸Flutter，有些地方還不是很理解，希望以后接觸的多了，可以豁然開朗吧?。?！給大家看一下效果圖：

•圖標(biāo)及按鈕組件

•圖標(biāo)組件

圖標(biāo)組件（Icon）為展示圖標(biāo)的組件，該組件不可交互，要實(shí)現(xiàn)可交互，可以考慮使用IconButton組件，圖標(biāo)組件相關(guān)的組件有一下幾個(gè)：

　　1.IconButton：可交互的Icon

　　2.Icons：框架自帶Icon集合

　　3.IconTheme：Icon主題

　　4.ImageIcon：通過(guò)AssetImages或者其他圖片顯示Icon

圖標(biāo)組件常用屬性表

屬性名	類型	默認(rèn)值	說(shuō)明
color	Color	null	圖標(biāo)的顏色
icon	IconData	null	展示的具體圖標(biāo)，可以使用Icons圖標(biāo)列表中的任意一個(gè)圖標(biāo)即可，如Icons.phone表示一個(gè)電話的圖標(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)按下事件，并且按下時(shí)會(huì)帶一個(gè)水波紋的效果，如果它的onPressed回調(diào)函數(shù)為null，那么這個(gè)按鈕處于禁用的狀態(tài)，并且不可以按下。

IconButton組件屬性及描述

屬性名	類型	默認(rèn)值	說(shuō)明
alignment	AlignmentGeometry	Alignment.center	定義IconButton的Icon對(duì)齊方式，默認(rèn)為居中，Alignment是可以設(shè)置x，y偏移量的
icon	Widget	null	展示的具體圖標(biāo)，可以使用Icons圖標(biāo)列表中的任意一個(gè)圖標(biāo)
color	Color	null	圖標(biāo)顏色
disabledColor	Color	ThemeData.disableColor	圖標(biāo)組件禁用的顏色
iconSize	double	24.0	圖標(biāo)大小
onPressed	VoidCallBack	null	當(dāng)按鈕按下時(shí)會(huì)觸發(fā)此回調(diào)事件
tooltip	String	“”	當(dāng)按鈕按下時(shí)的組件提示語(yǔ)

寫一個(gè)Demo，實(shí)現(xiàn)點(diǎ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: '點(diǎn)擊了IconButton并且Toas了一句話',
    toastLength: Toast.LENGTH_LONG,
    textColor: Colors.deepOrange,
    gravity: ToastGravity.BOTTOM
    );
  }),
  ),
 );
 }
}

附上效果截圖：

上面的代碼除了演示了IconButton的簡(jiǎn)單使用，還對(duì)AppBar做了一些出了，在title的左右增加了兩個(gè)圖片，當(dāng)然你也可以對(duì)其設(shè)置點(diǎn)擊事件

注：這里和大家說(shuō)一下在Flutter中怎么Toast出提示語(yǔ)，首先在pubspec.yaml引入fluttertoast包，點(diǎn)擊Packages get，然后在你需要toast的地方import該庫(kù)

//pubspec.yaml
fluttertoast: ^2.2.11

//import對(duì)應(yīng)庫(kù)
import 'package:fluttertoast/fluttertoast.dart';

• 凸起按鈕組件

突起按鈕組件（RaisedButton），往往我們?cè)陂_發(fā)過(guò)程中，不會(huì)一直用系統(tǒng)的圖標(biāo)，那么如果一個(gè)按鈕上需要我們添加自定義的文本，這樣的按鈕要怎么實(shí)現(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,//點(diǎn)擊時(shí)按鈕的顏色
   elevation: 10,
   shape: BeveledRectangleBorder(//帶斜角的長(zhǎng)方形邊框
   borderRadius: BorderRadius.all(Radius.circular(5))//圓角
   ),
   onPressed: (){
   Fluttertoast.showToast(
    msg: '點(diǎn)擊了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實(shí)現(xiàn)文本組件、圖標(biāo)及按鈕組件的代碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: