Flutter widgets——Text/Icon/Button

接着上一篇我们继续撸widget

Text

const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null),
       textSpan = null,
       super(key: key);
复制代码

softWrap 自动换行

overflow 文本超出样式

/// How overflowing text should be handled.
enum TextOverflow {
  /// Clip the overflowing text to fix its container.
  clip,

  /// Fade the overflowing text to transparent.
  fade,

  /// Use an ellipsis to indicate that the text has overflowed.
  ellipsis,
}
复制代码

Sample code

new Text(
  'Hello, $_name! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: new TextStyle(fontWeight: FontWeight.bold),
) 
复制代码

我们也可以用Text.rich来构造不同样式的TextSpan（跟UWP里面完全一样）

const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null),
      data = null,
      super(key: key);
复制代码

Sample code

const Text.rich(
  const TextSpan(
    text: 'Hello', // default text style
    children: const <TextSpan>[
      const TextSpan(text: ' beautiful ', style: const TextStyle(fontStyle: FontStyle.italic)),
      const TextSpan(text: 'world', style: const TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)
复制代码

如果你想让某个Widget里面的Text都使用共同一个Style的话。我们可以使用DefaultTextStyle,Style的原则还是就近原则，从树的叶子开始到根，这点也是跟UWP一致，各种Style也是就近原则进行merge的。

return DefaultTextStyle(
      style: TextStyle(color: Colors.red),
      child: new Column(
        children: <Widget>[
          new Text(
            'Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?',
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: new TextStyle(fontWeight: FontWeight.bold),
          ),
          Text.rich(
            const TextSpan(

              text: 'Hello', // default text style
              children: const <TextSpan>[
                const TextSpan(
                    text: ' beautiful ',
                    style: const TextStyle(fontStyle: FontStyle.italic)),
                const TextSpan(
                    text: 'world',
                    style: const TextStyle(fontWeight: FontWeight.bold)),
              ],
            ),
          )
          ,
          Text("hello flutter text",style: Theme.of(context).textTheme.title,),
        ],
      ),
    )
复制代码

Icon Flutter 里面的Icon是字体Icon,它的Data是IconData

class Icons {
  Icons._();

  // Generated code: do not hand-edit.
  // See https://github.com/flutter/flutter/wiki/Updating-Material-Design-Fonts
  // BEGIN GENERATED

  /// <i class="material-icons md-36">360</i> &#x2014; material icon named "360".
  static const IconData threesixty = IconData(0xe577, fontFamily: 'MaterialIcons');
复制代码

如果系统没有你想要的。。你可以去更新它

当然你也可以通过引用自定义的TTF来完成

这里是官方的一些自定义的Icon 搜搜看，很方便下载好的字体文件夹为

将fonts文件夹里面的MyFlutterApp.ttf 放到项目的fonts文件夹下面 pubspec.yaml文件里面加入下面配置。。注意缩进。。

  fonts:
    - family:  MyFlutterApp
      fonts:
       - asset: fonts/MyFlutterApp.ttf
复制代码

import 'package:widgets_sample/Common/my_flutter_app_icons.dart';

    new Column(
      children: <Widget>[
        Icon(Icons.add),
        Icon(MyFlutterApp.spin3),
        IconButton(icon: Icon(Icons.list), onPressed: () => {})
      ],
    );
复制代码

RaisedButton

Flutter的世界里面任何东西都可以由更小的Widget组成

Button 最下一层实现是InkWell(提供交互响应)，如果你只是想要tap等事件，不想要那种duangduangduang的水波纹效果，你可以使用GestureDetector。

///  * [GestureDetector], for listening for gestures without ink splashes.
///  * [RaisedButton] and [FlatButton], two kinds of buttons in material design.
///  * [InkResponse], a variant of [InkWell] that doesn't force a rectangular
///    shape on the ink reaction.
复制代码

Button默认是有最小宽度88.0,高36.0，

你可以通过包一个ButtonTheme重写

child: ButtonTheme(
        textTheme: ButtonTextTheme.normal,
        minWidth: 88.0,
        height: 36.0,
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("RaisedButton"),
              onPressed: () => {},
            ),
复制代码

Button的Disable状态是由OnPressed事件是否为Null来判断的。

Flutter本身提供很多种Button。

OutlineButton 下面是一个自定义的圆角按钮

class ButtonWithRadius extends OutlineButton {
  ButtonWithRadius(
      {Key key,
      @required onPressed,
      Color color,
      Color textColor,
      Widget child,
      double radius = 10.0})
      : super(
            key: key,
            onPressed: onPressed,
            child: child,
            color: color,
            textColor: textColor,
            shape: new RoundedRectangleBorder(
                side: BorderSide.none,
                borderRadius: new BorderRadius.circular(radius)));
复制代码

FlatButton

DropdownButton

            DropdownButton(
              value: dropdownValue,
              items: <String>['One', 'Two', 'Free', 'Four'].map((String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value),
                );
              }).toList(),
              onChanged: (String newValue) {
                setState(() {
                  dropdownValue = newValue;
                });
              },
            ),
复制代码

IconButton

            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {},
            ),
复制代码

InkWell A rectangular area of a Material that responds to touch.

ButtonBar

FloatingActionButton

            FloatingActionButton(
                child: const Icon(Icons.add),
                onPressed: () {
                  // Perform some action
                }),
复制代码

PopupMenuButton

            PopupMenuButton(itemBuilder: (BuildContext context) {
              return <String>['One', 'Two', 'Free', 'Four'].map((String item) {
                return new PopupMenuItem<String>(
                  value: item,
                  child: new Text(item),
                );
              }).toList();
            })
复制代码

全部以上介绍的Widgets都在Sample Code。

相关文章：