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

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

這篇文章主要介紹了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ù)，比如，如果此屬性設置的值為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，設置水平方向文案超出屏幕后，顯示...（瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字瞎寫的字）',
    style: new TextStyle(
    fontSize: 20,
    color: Colors.black,
    ),
    overflow: TextOverflow.ellipsis,//水平方向超出屏幕顯示...
   )
   ],
  ),//垂直方向排列
  ),
 );
 }
}

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

•圖標及按鈕組件

•圖標組件

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

　　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,//圖標顏色，設置為綠色，原本的顏色是黑色的
   size: 150.0,//Icon的大小
  ),
  ),
 );
 }
}

附上效果截圖：

•圖標按鈕組件

圖標按鈕組件（IconButton）是基于Material Design風格的組件，他可以響應按下事件，并且按下時會帶一個水波紋的效果，如果它的onPressed回調(diào)函數(shù)為null，那么這個按鈕處于禁用的狀態(tài)，并且不可以按下。

IconButton組件屬性及描述

屬性名	類型	默認值	說明
alignment	AlignmentGeometry	Alignment.center	定義IconButton的Icon對齊方式，默認為居中，Alignment是可以設置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的左右增加了兩個圖片，當然你也可以對其設置點擊事件

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

//pubspec.yaml
fluttertoast: ^2.2.11

//import對應庫
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,
   ),
   ),
  ),
  ),
 );
 }
}

附上效果截圖：