欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù),比如,如果此屬性設(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ù)組操作

    這篇文章主要介紹了java8新特性 stream流的方式遍歷集合和數(shù)組操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Java利用蒙特卡洛方法求解圓周率π值

    Java利用蒙特卡洛方法求解圓周率π值

    蒙特·卡羅方法(Monte Carlo method),也稱統(tǒng)計模擬方法,是一種以概率統(tǒng)計理論為基礎(chǔ)的數(shù)值計算方法。本文將利用該方法實現(xiàn)圓周率的計算,需要的可以參考一下
    2022-08-08
  • 如何使用Reactor完成類似Flink的操作

    如何使用Reactor完成類似Flink的操作

    這篇文章主要介紹了如何使用Reactor完成類似Flink的操作,幫助大家更好的理解和學習使用Java,感興趣的朋友可以了解下
    2021-03-03
  • Java Web中解決路徑(絕對路徑與相對路徑)問題

    Java Web中解決路徑(絕對路徑與相對路徑)問題

    這篇文章主要介紹了Java Web中解決路徑問題的相關(guān)資料,java 文件路徑有絕對路徑與相對路徑,這里提供了幾種方法解決所有路徑問題,需要的朋友可以參考下
    2017-01-01
  • Java與C++實現(xiàn)相同的MD5加密算法簡單實例

    Java與C++實現(xiàn)相同的MD5加密算法簡單實例

    下面小編就為大家?guī)硪黄狫ava與C++實現(xiàn)相同的MD5加密算法簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • Java實體類不要使用基本類型的知識點總結(jié)

    Java實體類不要使用基本類型的知識點總結(jié)

    在本篇文章里小編給大家整理的是關(guān)于Java包裝類之實體類不要使用基本類型的知識點內(nèi)容,需要的朋友們可以學習下。
    2020-02-02
  • 淺談Java之Map 按值排序 (Map sort by value)

    淺談Java之Map 按值排序 (Map sort by value)

    下面小編就為大家?guī)硪黄獪\談Java之Map 按值排序 (Map sort by value)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • SpringBoot配置系統(tǒng)全局異常映射處理

    SpringBoot配置系統(tǒng)全局異常映射處理

    在項目開發(fā)中,肯定少不了異常的出現(xiàn),作為后臺開發(fā)人員,我們總是在不停的寫各種接口提供給前端調(diào)用,然而不可避免的,當后臺出現(xiàn)BUG時,前端總是丑陋的講錯誤信息直接暴露給用戶,這樣的用戶體驗想必是相當差的,本文主要講解異常映射的配置
    2021-06-06
  • 淺析Java Web錯誤/異常處理頁面

    淺析Java Web錯誤/異常處理頁面

    這篇文章主要和大家一起對Java Web錯誤/異常處理頁面進行分析研究,感興趣的小伙伴們可以參考一下
    2016-03-03
  • 解讀SpringBoot中addCorsMappings配置跨域與攔截器互斥問題的原因

    解讀SpringBoot中addCorsMappings配置跨域與攔截器互斥問題的原因

    這篇文章主要介紹了解讀SpringBoot中addCorsMappings配置跨域與攔截器互斥問題的原因,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12

最新評論