Flutter文本与样式 #

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 16,
    color: Colors.black,
  ),
)

Text(
  String data, {
  Key? key,
  TextStyle? style,
  StrutStyle? strutStyle,
  TextAlign? textAlign,
  TextDirection? textDirection,
  Locale? locale,
  bool? softWrap,
  TextOverflow? overflow,
  double? textScaleFactor,
  int? maxLines,
  String? semanticsLabel,
  TextWidthBasis? textWidthBasis,
  TextHeightBehavior? textHeightBehavior,
  Color? selectionColor,
})

Text(
  '这是一段很长的文本内容，用于演示文本溢出效果。当文本超出容器宽度时，会显示省略号。',
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  softWrap: true,
)

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(
        text: '!',
        style: TextStyle(color: Colors.red),
      ),
    ],
  ),
)

TextStyle({
  bool inherit = true,
  Color? color,
  Color? backgroundColor,
  double? fontSize,
  FontWeight? fontWeight,
  FontStyle? fontStyle,
  double? letterSpacing,
  double? wordSpacing,
  TextBaseline? textBaseline,
  double? height,
  TextLeadingDistribution? leadingDistribution,
  Locale? locale,
  Paint? foreground,
  Paint? background,
  String? shadows,
  List<FontFeature>? fontFeatures,
  List<FontVariation>? fontVariations,
  TextDecoration? decoration,
  Color? decorationColor,
  TextDecorationStyle? decorationStyle,
  double? decorationThickness,
  String? debugLabel,
  String? fontFamily,
  List<String>? fontFamilyFallback,
  String? package,
  TextOverflow? overflow,
})

TextStyle(
  fontSize: 18,
  fontWeight: FontWeight.w600,
  fontStyle: FontStyle.italic,
  color: Colors.blue,
  backgroundColor: Colors.yellow.withOpacity(0.3),
  letterSpacing: 1.5,
  wordSpacing: 2.0,
  height: 1.5,
  decoration: TextDecoration.underline,
  decorationColor: Colors.red,
  decorationStyle: TextDecorationStyle.dashed,
  decorationThickness: 2,
)

FontWeight.w100
FontWeight.w200
FontWeight.w300
FontWeight.w400
FontWeight.w500
FontWeight.w600
FontWeight.w700
FontWeight.w800
FontWeight.w900

FontWeight.thin
FontWeight.extraLight
FontWeight.light
FontWeight.normal
FontWeight.medium
FontWeight.semiBold
FontWeight.bold
FontWeight.extraBold
FontWeight.black

TextDecoration.none
TextDecoration.underline
TextDecoration.overline
TextDecoration.lineThrough

TextDecoration.combine([
  TextDecoration.underline,
  TextDecoration.overline,
])

TextDecorationStyle.solid
TextDecorationStyle.double
TextDecorationStyle.dotted
TextDecorationStyle.dashed
TextDecorationStyle.wavy

TextStyle(
  shadows: [
    Shadow(
      color: Colors.black26,
      offset: Offset(2, 2),
      blurRadius: 4,
    ),
  ],
)

RichText(
  text: TextSpan(
    text: 'Welcome to ',
    style: DefaultTextStyle.of(context).style,
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

RichText(
  text: TextSpan(
    style: TextStyle(
      fontSize: 16,
      color: Colors.black,
    ),
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
          fontSize: 24,
        ),
      ),
      TextSpan(text: ' 是一个 '),
      TextSpan(
        text: '跨平台',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
        ),
      ),
      TextSpan(text: ' 移动应用开发框架。\n'),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.amber, size: 16),
      ),
      TextSpan(text: ' 由 '),
      TextSpan(
        text: 'Google',
        style: TextStyle(
          color: Colors.red,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: ' 开发维护。'),
    ],
  ),
)

RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(4),
          ),
          child: Text(
            'NEW',
            style: TextStyle(color: Colors.white, fontSize: 12),
          ),
        ),
      ),
      TextSpan(text: ' 新功能发布'),
    ],
  ),
)

RichText(
  text: TextSpan(
    text: '已有账号？',
    style: TextStyle(color: Colors.grey),
    children: [
      TextSpan(
        text: '立即登录',
        style: TextStyle(
          color: Colors.blue,
          decoration: TextDecoration.underline,
        ),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            print('Tap login');
          },
      ),
    ],
  ),
)

DefaultTextStyle(
  style: TextStyle(
    fontSize: 16,
    color: Colors.black87,
    height: 1.5,
  ),
  child: Column(
    children: [
      Text('第一行文本'),
      Text('第二行文本'),
      Text(
        '特殊样式',
        style: TextStyle(color: Colors.red),
      ),
    ],
  ),
)

DefaultTextStyle.merge(
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
  child: Text('合并样式'),
)

TextFormField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入用户名';
    }
    return null;
  },
  onSaved: (value) {
    print('Saved: $value');
  },
)

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
  maxLength: 20,
  maxLines: 1,
  obscureText: false,
  enabled: true,
  readOnly: false,
  onChanged: (value) {
    print('Changed: $value');
  },
  onFieldSubmitted: (value) {
    print('Submitted: $value');
  },
)

TextFormField(
  decoration: InputDecoration(
    labelText: '邮箱',
    labelStyle: TextStyle(color: Colors.blue),
    hintText: 'example@email.com',
    hintStyle: TextStyle(color: Colors.grey),
    helperText: '请输入有效的邮箱地址',
    errorText: '邮箱格式不正确',
    prefixIcon: Icon(Icons.email),
    suffixIcon: IconButton(
      icon: Icon(Icons.clear),
      onPressed: () => _controller.clear(),
    ),
    filled: true,
    fillColor: Colors.grey.shade100,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: BorderSide.none,
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: BorderSide(color: Colors.blue, width: 2),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: BorderSide(color: Colors.grey.shade300),
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
)

SelectableText(
  '这段文本可以被选择和复制',
  style: TextStyle(fontSize: 16),
  cursorWidth: 2,
  cursorColor: Colors.blue,
  cursorRadius: Radius.circular(4),
  showCursor: true,
  toolbarOptions: ToolbarOptions(
    copy: true,
    selectAll: true,
  ),
  onTap: () {
    print('Text tapped');
  },
)

SelectableText.rich(
  TextSpan(
    text: 'Hello ',
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700
        - asset: assets/fonts/CustomFont-Italic.ttf
          style: italic

Text(
  'Custom Font',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 24,
  ),
)

ThemeData(
  textTheme: TextTheme(
    bodyLarge: TextStyle(fontFamily: 'CustomFont'),
    bodyMedium: TextStyle(fontFamily: 'CustomFont'),
  ),
)

ThemeData(
  textTheme: TextTheme(
    displayLarge: TextStyle(fontSize: 57, fontWeight: FontWeight.w400),
    displayMedium: TextStyle(fontSize: 45, fontWeight: FontWeight.w400),
    displaySmall: TextStyle(fontSize: 36, fontWeight: FontWeight.w400),
    headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.w400),
    headlineMedium: TextStyle(fontSize: 28, fontWeight: FontWeight.w400),
    headlineSmall: TextStyle(fontSize: 24, fontWeight: FontWeight.w400),
    titleLarge: TextStyle(fontSize: 22, fontWeight: FontWeight.w400),
    titleMedium: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
    titleSmall: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
    bodyLarge: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
    bodyMedium: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
    bodySmall: TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
    labelLarge: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
    labelMedium: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
    labelSmall: TextStyle(fontSize: 11, fontWeight: FontWeight.w500),
  ),
)

Text(
  'Title',
  style: Theme.of(context).textTheme.titleLarge,
)

Text(
  'Body text',
  style: Theme.of(context).textTheme.bodyMedium,
)