1. 程式人生 > >Flutter學習筆記(11)--文字元件、圖示及按鈕元件

Flutter學習筆記(11)--文字元件、圖示及按鈕元件

如需轉載,請註明出處:Flutter學習筆記(11)--文字元件、圖示及按鈕元件

  • 文字元件

文字元件(text)負責顯示文字和定義顯示樣式,下表為text常見屬性

Text元件屬性及描述
屬性名 型別 預設值 說明
data String   要顯示的文字
maxLines int 0 文字要顯示的最大行數
style TextStyle null 文字樣式,可定義文字的字型大小、顏色、粗細等
textAlign TextAlign TextAlign.center 文字水平方向的對齊方式,取值有center、end、justify、left、right、start、values
textDirection TextDirection TextDirection.ltr 文字的書寫方向,如從左到右、從右到左
textScaleFactor double 1.0 字型的縮放係數,比如,如果此屬性設定的值為1.5,那麼字型會被放大到150%,也就是說比原來大了50%
textSpan TextSpan null 文字塊,TextSpan裡可以包含文字內容及樣式

 

 

 

 

 

 

 

 

 

 

 

 

 

老樣子,按照慣例附上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 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,//水平方向超出螢幕顯示...
            )
          ],
        ),//垂直方向排列
      ),
    );
  }
}

 

除了這些,還有很多其他的屬性等著我們去嘗試,我就不一一都寫出來了,我也是剛開始接觸Flutter,有些地方還不是很理解,希望以後接觸的多了,可以豁然開朗吧!!!給大家看一下效果圖:

 

 

  • 圖示及按鈕元件

  • 圖示元件

圖示元件(Icon)為展示圖示的元件,該元件不可互動,要實現可互動,可以考慮使用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 圖示的大小,注意要帶上小數位
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回撥函式為null,那麼這個按鈕處於禁用的狀態,並且不可以按下。

 

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 當按鈕按下時會觸發此回撥事件
tooltip String “” 當按鈕按下時的元件提示語

 

 

 

 

 

 

 

 

 

 

 

 

 

 

寫一個Demo,實現點選IconButton,出發onPressed回撥並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),往往我們在開發過程中,不會一直用系統的圖示,那麼如果一個按鈕上需要我們新增自定義的文字,這樣的按鈕要怎麼實現呢?

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),//內間距
          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
            );
          },
          //按鈕內的文字
          child: new Text(
            '我是RaisedButton按鈕',
            style: TextStyle(
              color: Colors.green,
              fontSize: 20.0,
            ),
          ),
        ),
      ),
    );
  }
}

 

 附上效果截圖:

 程式碼內有很詳細的註釋,如果有疑問的話,歡迎留言!!!

今天到這裡就結束了,希望每一天的部落格都可以給一些像我一樣剛開始接觸Flutter人一些小小的幫助!!!

下一章節:Flutter學習筆記(12)--列表