転載の場合は、ソースを明記してください：フラッターの研究ノート（11） -テキストコンポーネント、コンポーネントのアイコンやボタン
-
テキストコンポーネント
テキストコンポーネント（テキスト）はテキストと表示スタイル定義を表示するための責任があり、次の表には、テキスト、共通の財産であります
| プロパティ名 | タイプ | デフォルト値 | 説明 |
| データ | 弦 | テキストを表示するには | |
| MAXLINES | int型 | 0 | テキストの行の最大数を表示します |
| スタイル | TEXTSTYLE | ヌル | テキストスタイル、テキストのフォントサイズを定義し、色、重量、など |
| textAlign | textAlign | TextAlign.center | 水平方向のテキストの配置、値が、中心は、端部は、正当化、左、右、開始値を持ちます |
| textDirection | TextDirection | TextDirection.ltr | 右から左、左から右へなどのテキスト方向、 |
| textScaleFactor | ダブル | 1.0 | このプロパティが1.5の値に設定されている場合、フォントスケーリング係数は、例えば、そのフォントは150％に拡大され、それは、元の50％よりも大きいと言うことです |
| textSpan | TextSpan | ヌル | あなたがテキストの内容とスタイルを含めることができ、テキストブロック、TextSpan |
古い方法は、慣例により、デモを添付して、このようなように異なる色、異なる線が異なる数値と異なるなどのテキストスタイルを、表示するための複数のテキストコンポーネントを作成します。
インポート' パッケージ：フラッター/ material.dart ' ; ボイドメイン（）=> runApp（のDemoApp（））。 クラスのDemoAppがStatelessWidget {拡張 @Override ウィジェットのビルド（BuildContextコンテキスト）{ 返す 新しいMaterialApp（ タイトル：' 文本组件デモ' 、 自宅：新しい足場（ アプリケーションバー：新しいアプリケーションバー（ タイトル：テキスト（' 文本组件デモ' ）、 ）、 体：新しいカラム（ 子供： <ウィジェット>[ New新しいテキスト（ ' 最初のテキストデモ' 、 スタイル：新新TEXTSTYLE（ 色：Colors.amberAccent、 のfontSize：20である、 、） ）、 新しい新しいテキスト（ ' 2番目のテキストデモ' 、 スタイル：新新TEXTSTYLE（ 色：色を.deepOrange、 のfontSize：20である、 ）、 textScaleFactor：1.5ため、// 50％拡大 ）、 New新しいテキスト（ 「第三テキストデモ（夏謝謝夏夏夏謝謝謝夏夏夏謝謝謝夏夏夏謝謝謝夏夏夏謝謝を夏謝謝夏夏夏謝謝）「 スタイル：新新TEXTSTYLE（ 色：Colors.blue、 のfontSize：20である、 、） textAlign：TextAlign.ENDは、ある//は右を合わせる ）、 新新（テキスト 」 ' 「第四のテキストデモ 二行目に包まれたが、あなたはそれの外に表示することができますかどうかを確認」「」、 スタイル：新新TEXTSTYLE（ のfontSize：20 、 カラー：Colors.green、 ）、 MAXLINES：2、// 最大2回線 ）、 新しい新しいテキスト（ 「第五デモ、スクリーンを超えて水平方向のコピーを設定した後、表示されます...（夏謝ワード夏謝夏謝謝夏単語単語単語単語単語夏謝謝夏夏夏謝謝語の単語）" 、 スタイル：新新TEXTSTYLE（ のfontSize：20は、 カラー：Colors.black、 ）、 オーバーフロー：TextOverflow.ellipsis 、// スクリーンの外側横方向... ） ] ）// 垂直に配置されました 、） ）; } }
これらに加えて、私たちがしようとするのを待っている他の多くの属性がありますが、私がダウンして書かれていないだろう、私はちょうどフラッターを使い始めるた、いくつかの場所で非常に理解していない、よりに連絡したいと考えて、あなたは突然光を見ることができます！！！レンダリングを見てみんな：
-
アイコンとボタン部品
-
アイコンコンポーネント
アイコンコンポーネント（アイコン）コンポーネントのアイコン関連のコンポーネントは、いくつかのを見て、IconButtonコンポーネントを使用することを検討して、インタラクティブ達成するために、対話することはできませんコンポーネントのアイコンを表示します：
1.IconButton：インタラクティブアイコン
2.Icons：アイコンのフレームワークは、のセットが付属しています
3.IconTheme：アイコンテーマ
4.ImageIcon：AssetImagesまたは他の画像によるアイコン表示
| プロパティ名 | タイプ | デフォルト値 | 説明 |
| 色 | 色 | ヌル | カラーアイコン |
| アイコン | eksperimentelle | ヌル | 特定のアイコンを表示し、あなたがそのような電話のアイコンとしてアイコンの一覧がIcons.phoneを表す任意のアイコンのアイコンを使用することができます |
| スタイル | TEXTSTYLE | ヌル | テキストスタイル |
| サイズ | ダブル | 24.0 | 注目の小数点以下の桁数を持って、アイコンの大きさ、 |
| textDirection | TextDirection | TextDirection.ltr | テキスト配列方向 |
デモコードを接続します。
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，那么这个按钮处于禁用的状态，并且不可以按下。
| 属性名 | 类型 | 默认值 | 说明 |
| 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人一些小小的帮助！！！