Flutter中怎么实现一个文本组件-创新互联
Flutter中怎么实现一个文本组件，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
•文本组件
文本组件（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:
除了这些，还有很多其他的属性等着我们去尝试，我就不一一都写出来了，我也是刚开始接触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:
附上效果截图：
上面的代码除了演示了IconButton的简单使用，还对AppBar做了一些出了，在title的左右增加了两个图片，当然你也可以对其设置点击事件
注：这里和大家说一下在Flutter中怎么Toast出提示语，首先在pubspec.yaml引入fluttertoast包，点击Packages get，然后在你需要toast的地方import该库
//pubspec.yamlfluttertoast: ^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:
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联网站建设公司，的支持。
网页标题：Flutter中怎么实现一个文本组件-创新互联
URL分享：http://cdiso.cn/article/dehdpg.html
