我爱模板网 > 建站教程 > APP开发,混合APP >  Flutter笔记75:DefaultTextStyle文本样式组件正文

Flutter笔记75:DefaultTextStyle文本样式组件

Flutter的DefaultTextStyle组件用于给子Text加样式,所有隶属于它的子元素的Text都会应用这种样式。如果Text组件指定了自己的样式,则使用自己的样式,否则就继承DefaultTextStyle的样式:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main(){
  //开启调试线条,比如引入rendering.dart
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    //DefaultTextStyle用法1:
    var text1 = DefaultTextStyle.merge(
      style: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.w800,
        fontFamily: 'Roboto',
        fontSize: 12.0,
        height: 1.2  //行高,倍数
      ),
      child: Row(
          children: [
            Column(
              children: [
                Text('PREP'),
                Text('25 min')
              ],
            ),
            Column(
              children: [
                Text('COOK'),
                Text('1 hours', style: TextStyle(color: Colors.blue),)
              ],
            ),
            Column(
              children: [
                Text('PEEDS'),
                Text('4-6')
              ],
            )
          ],
        ),
    );

    var text2 = Container(
      width: 150,
      color: Colors.red,
      child: DefaultTextStyle(
        style: TextStyle(fontSize: 18),
        // TextOverflow.clip:直接截取
        // TextOverflow.fade:渐隐
        // TextOverflow.ellipsis:省略号形式
        // TextOverflow.visible:可见
        overflow: TextOverflow.ellipsis,
        child: Text('我爱模板网,我爱模板网,我爱模板网,我爱模板网,我爱模板网,'),
      ),
    );

    return MaterialApp(
        title: 'DefaultTextStyle',
        theme: ThemeData(
          primarySwatch: Colors.blue
        ),
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Text('DefaultTextStyle'),
          ),
          body: Column(
            children: [
              text1,
              text2
            ],
          )
        ),
      );
  }
}



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Flutter笔记74:Hero页面切换动画 下一篇:Flutter BottomAppBar自定义底部tab栏凸起
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢