Flutter study notes (11) - the text component, the component icons and buttons Flutter study notes (11) - the text component, the component icons and buttons Flutter study notes (12) - the list of components

For reprint, please indicate the source: Flutter study notes (11) - the text component, the component icons and buttons

Text Component

Text components (text) is responsible for displaying text and display style definitions, the following table is a text common property

Text and component properties described
Property name	Types of	Defaults	Explanation
data	String		To display the text
maxLines	int	0	The maximum number of lines of text to be displayed
style	TextStyle	null	Text style, define the text font size, color, weight, etc.
textAlign	textAlign	TextAlign.center	Alignment of the text in the horizontal direction, the value has center, end, justify, left, right, start, values
textDirection	TextDirection	TextDirection.ltr	Text direction, such as left to right, right to left
textScaleFactor	double	1.0	Font scaling factor, for example, if this property is set to a value of 1.5, then the font is enlarged to 150%, that is to say 50% bigger than the original
textSpan	TextSpan	null	Text block, TextSpan where you can contain text content and style

The old way, by convention attach Demo, create multiple text components to display different text styles, such as different colors, different numbers from different linear and so on.

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 new the Text (
               ' the first text Demo ' , 
              style: new new the TextStyle ( 
                Color: Colors.amberAccent, 
                the fontSize: 20 is , 
              ), 
            ), 
            new new the Text (
               ' second text Demo ' , 
              style: new new the TextStyle ( 
                Color: Colors .deepOrange, 
                the fontSize: 20 is , 
              ), 
              textScaleFactor: for 1.5 , // enlarged 50%
            ),
             New new the Text (
               ' third text Demo (Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie Xia Xie the Xia Xie Xia Xie Xia Xie Xia Xie) ' , 
              style: new new the TextStyle ( 
                Color: Colors.blue, 
                the fontSize: 20 is , 
              ), 
              textAlign: TextAlign.END is, // align Right 
            ),
             new new the Text (
               ' ' ' the fourth text Demo 
              wrapped to a second line, see if you can show out of it ' '' , 
              style: new new TextStyle ( 
                fontSize: 20, 
                Color: Colors.green, 
              ), 
              maxLines: 2 , // maximum 2 lines 

            ), 
            new new the Text (
               ' fifth Demo, after setting the horizontal direction copy beyond the screen, displays ... (Xia Xie word Xia Xie Xia Xie Xia Xie word word word word word Xia Xie Xia Xie Xia Xie Xia Xie word words) ' , 
              style: new new the TextStyle ( 
                the fontSize: 20 is , 
                Color: Colors.black, 
              ), 
              overflow: TextOverflow.ellipsis , // horizontal direction outside of the screen ... 
            ) 
          ], 
        ), // arranged vertically 
      ), 
    ); 
  }
}

In addition to these, there are many other attributes waiting for us to try, I will not written down, I was just getting started with Flutter, in some places is not very understanding, hope to contact more, you can suddenly see the light ! ! ! Everyone to look at renderings:

Icon and Button components
Icon Component

Icon Component (Icon) to show icon of component that can not interact, to achieve interactive, consider using IconButton components, component icons related components have look at a few:

　　1.IconButton: interactive Icon

　　2.Icons: Icon framework comes with a set of

　　3.IconTheme: Icon Theme

　　4.ImageIcon: Icon display by AssetImages or other images

Icon Component Common Property Sheet
Property name	Types of	Defaults	Explanation
color	Color	null	Color icon
icon	The eksperimentelle	null	Display specific icon, you can use any icon Icons a list of icons, such as a phone icon represents Icons.phone
style	TextStyle	null	Text Style
size	Double	24.0	Size of the icons, to bring attention decimal places
textDirection	TextDirection	TextDirection.ltr	Text arrangement direction

Attach Demo Code:

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）--列表组件

Flutter study notes (11) - the text component, the component icons and buttons Flutter study notes (11) - the text component, the component icons and buttons Flutter study notes (12) - the list of components

For reprint, please indicate the source: Flutter study notes (11) - the text component, the component icons and buttons

Text Component

Icon and Button components

Icon Component

图标按钮组件

凸起按钮组件

Guess you like