Flutter实战】文本组件及五大案例

Text

Text('老孟')

Text('老孟',style: TextStyle(color: Colors.red,fontSize: 20),),

Text('老孟',style: TextStyle(fontWeight: FontWeight.bold))

Text('老孟',style: TextStyle(fontStyle: FontStyle.italic,))

1. 首先下载字体库（比如中华字体库）
2. 将字体文件拷贝的项目中，一般目录是：assets/fonts/，assets和fonts都需要手动创建，此目录不是必须的，而是约定俗成，资源一般都放在assets目录下。
3. 配置pubspec.yaml：

fonts:
  - family: maobi 
    fonts:
      - asset: assets/fonts/maobi.ttf

Text('老孟',style: TextStyle(fontFamily: 'maobi',)),

Container(
  height: 100,width: 200,color: Colors.blue.withOpacity(.4),child: Text('老孟',textAlign: TextAlign.center),

• left：左对齐
• right：右对齐
• center：居中
• justify：两端对齐，此属性中文存在bug（Flutter版本：1.17.3）也可以在官方issue中关注此问题
• start：前端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则左对齐，设置TextDirection.rtl则右对齐。
• end：末端对齐，和TextDirection属性有关，如果设置TextDirection.ltr，则右对齐，设置TextDirection.rtl则左对齐。

Container(
  height: 100,child: Text('老孟，专注分享Flutter技术和应用实战',softWrap: true,)

Container(
  height: 100,overflow: TextOverflow.ellipsis,)

• clip：直接裁剪。
• fade：越来越透明。
• ellipsis：省略号结尾。
• visible：依然显示，此时将会溢出父组件。

MaterialApp(
  title: 'Flutter Demo',theme: ThemeData(
   ...
    textTheme: TextTheme(
        bodyText2: TextStyle(color: Colors.red,fontSize: 24),)
  ),home: Scaffold(
    body: TextDemo(),)

Text('老孟'),Text('老孟',style: TextStyle(color: Colors.blue,

RichText

RichText(
  text: TextSpan(
      style: DefaultTextStyle.of(context).style,children: <InlineSpan>[
        TextSpan(text: '老孟',style: TextStyle(color: Colors.red)),TextSpan(text: '，'),TextSpan(text: '专注分享Flutter技术和应用实战'),]),)

TextField

TextField()

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.person),)

TextField(
  decoration: InputDecoration(
    labelText: '姓名：',labelStyle: TextStyle(color:Colors.red)
  ),)

TextField(
  decoration: InputDecoration(
    helperText: '用户名长度为6-10个字母',helperStyle: TextStyle(color: Colors.blue),helperMaxLines: 1
  ),)

TextField(
  decoration: InputDecoration(
    hintText: '请输入用户名',hintStyle: TextStyle(color: Colors.grey),hintMaxLines: 1
  ),)

TextField(
  decoration: InputDecoration(
    errorText: '用户名输入错误',errorStyle: TextStyle(fontSize: 12),errorMaxLines: 1,errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),)

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.person)
  ),)

TextField(
  decoration: InputDecoration(
      suffixIcon: Icon(Icons.person)
  ),)

var _textFieldValue = '';
TextField(
  onChanged: (value){
    setState(() {
      _textFieldValue = value;
    });
  },decoration: InputDecoration(
    counterText: '${_textFieldValue.length}/32'
  ),)

Container(
  height: 60,width: 250,child: TextField(
    decoration: InputDecoration(
      fillColor: Color(0x30cccccc),filled: true,enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Color(0x00FF0000)),borderRadius: BorderRadius.all(Radius.circular(100))),hintText: 'QQ号/手机号/邮箱',focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Color(0x00000000)),)

TextEditingController _controller;

@override
void initState() {
  super.initState();
  _controller = TextEditingController()
    ..addListener(() {
      //获取输入框的内容，变为大写
      _controller.text = _controller.text.toUpperCase();

    });
}

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,);
}

@override
dispose() {
  super.dispose();
  _controller.dispose();
}

• text：通用键盘。
• multiline：当TextField为多行时（maxLines设置大于1），右下角的为“换行” 按键。
• number：数字键盘。
• phone：手机键盘，比数字键盘多"*"和 "#"。
• datetime：在ios上和text一样，在android上出现数字键盘、":"和 "-"。
• emailAddress：邮箱键盘，有"@" 和 "."按键。
• url：url键盘，有"/" 和 "."按键。
• visiblePassword：既有字幕又有数字的键盘。

• none：android上显示返回键，ios不支持。
• unspecified：让操作系统自己决定哪个合适，一般情况下，android显示“完成”或者“返回”。
• done：android显示代表“完成”的按钮，ios显示“Done”（中文：完成）。
• go：android显示表达用户去向目的地的图标，比如向右的箭头，ios显示“Go”（中文：前往）。
• search：android显示表达搜索的按钮，ios显示"Search"（中文：搜索）。
• send：android显示表达发送意思的按钮，比如“纸飞机”按钮，ios显示"Send"（中文：发送）。
• next：android显示表达“前进”的按钮，比如“向右的箭头”,ios显示"Next"（中文：下一项）。
• previous：android显示表达“后退”的按钮，比如“向左的箭头”,ios不支持。
• continueAction：android 不支持，ios仅在ios9.0+显示"Continue"（中文：继续）。
• join：Android和ios显示"Join"（中文：加入）。
• route：android 不支持，ios显示"Route"（中文：路线）。
• emergencyCall：android 不支持，ios显示"Emergency Call"（中文：紧急电话）。
• newline：android显示表达“换行”的按钮，ios显示”换行“。

• words：每一个单词的首字母大写。
• sentences：每一句话的首字母大写。
• characters：每个字母都大写
• none：都小写

TextField(
  textAlignVertical: TextAlignVertical.center,textDirection: TextDirection.rtl,)

TextField(
  toolbarOptions: ToolbarOptions(
    copy: true,cut: true,paste: true,selectAll: true
  ),)

TextField(
  showCursor: true,cursorWidth: 3,cursorRadius: Radius.circular(10),cursorColor: Colors.red,)

TextField(
  obscureText: true,)

TextField(
  inputFormatters: [
    WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),],)

TextField(
  onChanged: (value){
    print('onChanged:$value');
  },onEditingComplete: (){
    print('onEditingComplete');
  },onTap: (){
    print('onTap');
  },)

TextField(
  maxLength: 100,buildCounter: (
    BuildContext context,{
    int currentLength,int maxLength,bool isFocused,}) {
    return Text(
      '$currentLength/$maxLength',);
  },)

FocusScope.of(context).requestFocus(_focusNode);

_focusNode = FocusNode();

TextField(
	focusNode: _focusNode,...
)

_focusNode.unfocus();

过渡颜色的文字

Builder(
  builder: (BuildContext context) {
    RenderBox box = context.findRenderObject();
    final Shader linearGradient = LinearGradient(
      colors: <Color>[Colors.purple,Colors.blue],).createShader(
        Rect.fromLTWH(0.0,0.0,box?.size?.width,box?.size?.height));

    return Text(
      '老孟，专注分享Flutter技术和应用实战',style: new TextStyle(
          fontSize: 18.0,fontWeight: FontWeight.bold,foreground: Paint()..shader = linearGradient),)

带前后置标签的文本

RichText(
  text: TextSpan(
      style: DefaultTextStyle.of(context).style,children: <InlineSpan>[
        WidgetSpan(
            child: Container(
              margin: EdgeInsets.only(right: 10),padding: EdgeInsets.symmetric(horizontal: 10),decoration: BoxDecoration(
                  shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(20)),color: Colors.blue),child: Text(
                '判断题',style: TextStyle(color: Colors.white),TextSpan(text: '泡沫灭火器可用于带电灭火'),)

“服务协议”

Text.rich(
  TextSpan(
      text: '登录即代表同意并阅读',style: TextStyle(fontSize: 11,color: Color(0xFF999999)),children: [
        TextSpan(
          text: '《服务协议》',fontWeight: FontWeight.bold),recognizer: TapGestureRecognizer()
            ..onTap = () {
              print('onTap');
            },)

登录密码输入框

TextField(
  decoration: InputDecoration(
    fillColor: Color(0x30cccccc),enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Color(0x00FF0000)),hintText: '输入密码',focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Color(0x00000000)),textAlign: TextAlign.center,obscureText: true,onChanged: (value) {

  },)

评论回复

Text.rich(
  TextSpan(
      text: '回复',children: [
        TextSpan(
          text: '@老孟：',TextSpan(
          text: '你好，想知道Flutter发展前景如何？',)