Flutter學習筆記（11）--文本組件、圖標及按鈕組件

時間  2019-11-08
標籤 flutter 學習 筆記 文本 組件 圖標 按鈕 简体版
原文   原文鏈接

如需轉載，請註明出處：Flutter學習筆記（11）--文本組件、圖標及按鈕組件

  • 文本組件

文本組件（text）負責顯示文本和定義顯示樣式，下表爲text常見屬性html

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，建立多個文本組件來展現不一樣的文本樣式，好比不一樣的顏色，不一樣的自號，不一樣的線形等。android

 

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，有些地方還不是很理解，但願之後接觸的多了，能夠豁然開朗吧！！！給你們看一下效果圖：app

 

 

  • 圖標及按鈕組件

  • 圖標組件

圖標組件（Icon）爲展現圖標的組件，該組件不可交互，要實現可交互，能夠考慮使用IconButton組件，圖標組件相關的組件有一下幾個：框架

　　1.IconButton：可交互的Iconless

　　2.Icons：框架自帶Icon集合ide

　　3.IconTheme：Icon主題函數

　　4.ImageIcon：經過AssetImages或者其餘圖片顯示Iconpost

 

圖標組件經常使用屬性表
屬性名 類型 默認值 說明
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）--列表組件

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程