flutter 样式记录 (作用:方法或属性 的形式) (前端基础速查)

“#” 表示于 css, html 这种 web 前端属性的关联

文本与盒子

文本容器 Text()

#span

    Text('hello flutter')

垂直水平居中 Center()

# 父元素 justify-centent:center; align-items: center

    Center(Text('hello flutter'))

块(容器|盒子)

块元素 Container()

#div

    // 居中
    Center(
        // 子元素
        child: Container(
      // 子元素
      child: Text(
          // 文本内容
          'flutter Center Container Text',
          // 文本水平排列位置
          textAlign: TextAlign.right,
          // 文本样式
          style: TextStyle(
            // 字体大小
            fontSize: 16.0,
            // 文本颜色
            color: Colors.pink.shade200,
            // 文本粗细
            fontWeight: FontWeight.bold,
            // 文字倾斜
            fontStyle: FontStyle.italic,
            // 文本线 删除线
            decoration: TextDecoration.lineThrough,
            // 文本线颜色
            decorationColor: Colors.white,
            // 文本线的类型
            decorationStyle: TextDecorationStyle.double,
          ),
          // 文本溢出的操作
          overflow: TextOverflow.ellipsis,
          // 最大换行数
          maxLines: 1,
          // 文本放大
          textScaleFactor: 2,
      ),
      // 宽度
      width: 300,
      // 高度
      height: 300,
      // 设置容器的样式
      decoration: BoxDecoration(
            // 背景颜色
            color: Colors.yellow
            // 边框样式
            border: Border.all(
                // 边框颜色
                color: Colors.blue,
                // 边框宽度
                width: 2.0
                )
            ),
            // 边框圆角
            borderRadius: BorderRadius.all(
                Radius.circular(100),
            ),
        ),
    ));

图片

远程图片和圆形图片

 @override
  Widget build(BuildContext context) {
    Option option = Option();
    // TODO: implement build
    return Container(
      width: option.setWidth(150.0),
      height: option.setHeight(150.0),
      // 远程图片
      child: Image.network(
        // src 地址
        'http://10.1.6.76:8760/bp/currency/getImage/cf8a2a1127b101da66034131f789004e',
        // 修改排列方位
        alignment: Alignment.topRight,
        // 修改图片颜色
        color: Colors.red,
        // 混合模式
        // colorBlendMode: BlendMode.screen,
        // 重要属性
        fit: BoxFit.cover,
      ),
      // 盒子装饰
      decoration: BoxDecoration(
        // 盒子背景色
        color: Colors.yellow,
        // 圆角
        borderRadius: BorderRadius.circular(option.getRadius()),
        // 设置圆形图片(第一种方法)
        image: DecorationImage(
          // 这里的远程图片需要用 NetworkImage 类
          image: NetworkImage(
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F8c9abe08a5b237c4490210c08e3845cdae869b7c35fa5-BFL2ln_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634455002&t=e0c7f819ec623216def56f512f48177d'),
          fit: BoxFit.cover,
        ),
      ),
      // transform: Matrix4.translationValues(20, 60, 0),
    );
  }

圆形图片方法 2

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      // 圆形图片组件实现圆形图片
      child: ClipOval(
        child: Image.network(
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F8c9abe08a5b237c4490210c08e3845cdae869b7c35fa5-BFL2ln_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634455002&t=e0c7f819ec623216def56f512f48177d',
          fit: BoxFit.cover,
          width: 300,
          height: 300,
        ),
      ),
      decoration: BoxDecoration(
        color: Colors.yellow,
      ),
    );
  }
}

flutter 中使用本地图片

1. 创建目录( flutter 规范)

   在项目跟目录( lib 同级)创建 images 目录
   在 images 目录下创建 '2.0x', '3.0x' 两个目录
   (flutte 要求必须有 '2.0x', '3.0x' 目录)
   

2. 配置图片路径

       在 pubspec.yaml 文件中配置图片路径
       (flutter子级, 与 'uses-material-design: true' 同级)
        assets:
         - images/thumbnail.jpg
         - images/2.0x/thumbnail.jpg
         - images/3.0x/thumbnail.jpg
   

详细示例

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/thumbnail.jpg
    - images/2.0x/thumbnail.jpg
    - images/3.0x/thumbnail.jpg

使用示例

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 300,
      height: 300,
      child: ClipOval(
        // 用法与Image.network一样
        child: Image.asset(
          'images/thumbnail.jpg',
          width: 300,
          height: 300,
        ),
      ),
      decoration: BoxDecoration(
        color: Colors.yellow,
      ),
    );
  }
}