（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器 装饰盒子 边框 圆角 阴影 形状 渐变 背景图像

RichText：行内多样式的文字

import 'package:flutter/material.dart';

class BasicDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 富文本显示richText
    return RichText(
      text: TextSpan(
        text: 'www.liuan',
        style: TextStyle(
          color: Colors.deepPurpleAccent,
          fontSize: 34.0,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.w100,
        ),
        children: [
          TextSpan(
            text: '.mobi',
            style: TextStyle(
              fontSize: 17.0,
              color: Colors.grey
            )
          )
        ]
      ),
    );
  }
}

class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
  );
  final String _author = '李白';
  final String _title = '将进酒';
  @override
  Widget build(BuildContext context) {
    // 文字与文字样式
    return Text(
      "《$_title》 --- $_author 君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒)古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",
      textAlign: TextAlign.left,
      style: _textStyle,
      maxLines: 3,
      overflow: TextOverflow.ellipsis,
    );
  }
}

TextDemo  文字与文字的样式

Flutter 容器 装饰盒子 边框 圆角 阴影 形状 渐变 背景图像

class BasicDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 富文本显示richText
    return Container(
      // 颜色
      // color: Colors.grey[100],
      // 背景图像
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage('https://avatar.csdn.net/9/3/9/1_mp624183768.jpg?1544669678'),
          alignment: Alignment.topCenter,
          fit: BoxFit.cover,
          colorFilter: ColorFilter.mode(
            Colors.indigoAccent[400].withOpacity(0.5), 
            BlendMode.hardLight)
          // repeat: ImageRepeat.repeatY
        )
      ),

      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Icon(Icons.pool, size: 32.0, color: Colors.white),
            // color: Color.fromRGBO(3, 54, 255, 1.0),
            padding: EdgeInsets.only(left: 24.0, right: 8.0),
            margin: EdgeInsets.all(8.0),
            width: 90.0,
            height: 90.0,
            decoration: BoxDecoration(
              color: Color.fromRGBO(3, 54, 255, 1.0),
              // 区分设置
              // border: Border(
              //   top: BorderSide(
              //     color: Colors.indigoAccent[100],
              //     width: 3.0,
              //     style: BorderStyle.solid,
              //   ),
              //   bottom: BorderSide(
              //     color: Colors.indigoAccent[100],
              //     width: 3.0,
              //     style: BorderStyle.solid,
              //   ),
              // ),
              // 一起设置
              border: Border.all(
                  color: Colors.redAccent[100],
                  width: 3.0,
                  style: BorderStyle.solid),
              // 圆角
              // borderRadius: BorderRadius.all(Radius.circular(16.0)),
              //单独设置圆角
              // borderRadius: BorderRadius.only(
              //   topLeft: Radius.circular(12),
              //   bottomRight: Radius.circular(12),
              //   bottomLeft: Radius.circular(12),
              //   topRight: Radius.circular(12),
              // ),
              // 形状
              shape: BoxShape.circle,
              // 渐变 镜像渐变
              // gradient: RadialGradient(
              //   colors: [
              //     Color.fromRGBO(7, 102, 255, 1.0),
              //     Color.fromRGBO(3, 28, 128, 1.0),
              //   ]
              // ),
              // 渐变 线性渐变
              gradient: LinearGradient(colors: [
                Color.fromRGBO(7, 102, 255, 1.0),
                Color.fromRGBO(3, 28, 128, 1.0),
              ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
              // 阴影
              boxShadow: [
                BoxShadow(
                    offset: Offset(6.0, 7.0),
                    color: Color.fromRGBO(16, 20, 188, 1.0),
// 模糊程度
                    blurRadius: 25.0,
// 扩散程度 负的 缩小 正的 增大
                    spreadRadius: -9.0)
              ],
            ),
          )
        ],
      ),
    );
  }
}

最后

以上就是尊敬白昼为你收集整理的（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器 装饰盒子 边框 圆角 阴影 形状 渐变 背景图像的全部内容，希望文章能够帮你解决（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器 装饰盒子 边框 圆角 阴影 形状 渐变 背景图像所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。