Flutter #05 深入了解 the TextStyle Widget

目錄:

  1. 文本樣式的參數(shù)
  2. 默認(rèn)文本樣式
  3. 文字加波浪線
  4. 文字加橫線
  5. 文字加陰影
  6. 文字加背景框
  7. 文字加漸變色
  8. 文字風(fēng)格屬性
  9. 文字加雙下劃線

一、文本樣式的參數(shù)

下面列出了 TextStyle widget 的全部參數(shù):

    bool? inherit,
    Color? color,
    Color? backgroundColor,
    String? fontFamily,
    List<String>? fontFamilyFallback,
    double? fontSize,
    FontWeight? fontWeight,
    FontStyle? fontStyle,
    double? letterSpacing,
    double? wordSpacing,
    TextBaseline? textBaseline,
    double? height,
    Locale? locale,
    Paint? foreground,
    Paint? background,
    List<ui.Shadow>? shadows,
    List<ui.FontFeature>? fontFeatures,
    TextDecoration? decoration,
    Color? decorationColor,
    TextDecorationStyle? decorationStyle,
    double? decorationThickness,
    String? debugLabel

二、默認(rèn)文本樣式

    return Material(
      child: Center(
        child: Text(
          '好好學(xué)習(xí),努力賺錢',
          //style: textStyle,
        ),
      ),
    );

三、文字加波浪線

    return const Material(
      child: Center(
        child: Text(
          '好好學(xué)習(xí),努力掙錢',
          style: TextStyle(
            fontSize: 20,
            decoration: TextDecoration.lineThrough,
            decorationStyle: TextDecorationStyle.wavy,
          ),
        ),
      ),
    );

四、字體加橫線

    return const Material(
      child: Center(
        child: Text(
          '好好學(xué)習(xí),努力掙錢',
          style: TextStyle(
            fontSize: 20,
            decoration: TextDecoration.lineThrough,
            decorationThickness: 4,
          ),
        ),
      ),
    );

五、文字加陰影

    return const Material(
      child: Center(
        child: Text(
          '好好學(xué)習(xí),努力掙錢',
          style: TextStyle(
            fontSize: 36,
            shadows: [
              Shadow(
                color: Colors.blue,
                blurRadius: 1,
                offset: Offset(1, 1),
              ),
              Shadow(
                color: Colors.red,
                blurRadius: 10,
                offset: Offset(-5, 5),
              ),
            ],
          ),
        ),
      ),
    );

六、文字加背景框

    return Material(
      child: Center(
        child: Text('好好學(xué)習(xí),努力掙錢',
            style: TextStyle(
                background: Paint()
                  ..strokeWidth = 30.0
                  ..color = Colors.blue
                  ..style = PaintingStyle.stroke
                  ..strokeJoin = StrokeJoin.round)),
      ),
    );

七、文字加漸變顏色

    return Material(
        child: Center(
          child: Text(
            '好好學(xué)習(xí),努力掙錢',
            style: TextStyle(
                fontSize: 36,
                fontWeight: FontWeight.bold,
                foreground: Paint()
                  ..shader = linearGradient),
          ),
        ));

八、文字風(fēng)格的屬性:字體大小、顏色、高度、詞間距、字母間距、字體加粗、字體。

    return const Material(
        child: Center(
          child: Text(
            '好好學(xué)習(xí),努力掙錢',
            style: TextStyle(fontSize: 32,color: Colors.black38,height: 6,wordSpacing: 12,letterSpacing: 2,fontWeight: FontWeight.bold,fontStyle: FontStyle.italic),
          ),
        ));

九、文字加雙下劃線

    return const Center(
      child: Text(
        '好好學(xué)習(xí),努力掙錢',
        style: TextStyle(fontSize: 32),
      ),
    );
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容