Flutter组件（Text，Container，image）

已于 2023-02-23 13:13:30 修改
阅读量535 收藏
点赞数
分类专栏： Flutter 文章标签： flutter android
于 2022-01-10 23:01:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46527751/article/details/122417273
版权

Flutter组件

Text组件

构造方法

  const Text(
    String this.data, {
    Key? key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  })
名称功能
textAlign文本对齐方式（center 居中，left 左对齐，right 右对齐，justfy 两端对齐）
textDirection文本方向（ltr 从左至右，rtl 从右至左）
overflow文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号）
textScaleFactor字体显示倍率
maxLines文字显示最大行数
style字体的样式设置

TextStyle参数

名称参数
decoration文字装饰线（none 没有线，lineThrough 删除线，overline 上划线，underline 下划线）
decorationColor文字装饰线颜色
decorationStyle文字装饰线风格（[dashed,dotted]虚线，double 两根线，solid 一根实线，wavy 波浪线）
wordSpacing单词间隙(如果是负值，会让单词变得更紧凑)
letterSpacing字母间隙（如果是负值，会让字母变得更紧凑）
fontStyle文字样式（italic 斜体，normal 正常体）
fontSize文字大小
color文字颜色
fontWeight字体粗细（bold 粗体，normal 正常体）
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: const Text(
          '我是一个文本我是一个文本我是一个文本我是一个文本',
          textAlign: TextAlign.center,
          //最大显示行数
          maxLines: 2,
          //文本超过一行时的显示方式
          overflow: TextOverflow.fade,
          //把文本放大两倍
          textScaleFactor: 2,
          //设置字体样式
          style: TextStyle(
            //字体大小
            fontSize: 16.0,
            //字体颜色
            color: Colors.red,
            //字体加粗
            fontWeight: FontWeight.w800,
            //字体倾斜
            fontStyle: FontStyle.italic,
            //分割线
            decoration: TextDecoration.lineThrough,
            //分割线颜色
            decorationColor: Colors.black,
            //分割线样式
            decorationStyle: TextDecorationStyle.dotted,
            //字间距
            letterSpacing: 3.0
            ),
        ),
        height: 300,
        width: 300,
        decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(color: Colors.blue, width: 2.0),
            ),
      ),
    );
  }
}

在这里插入图片描述

Container组件

Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })
参数名称
alignmenttopCenter：顶部居中对齐
topLeft：顶部左对齐
topRight：顶部右对齐
center：水平垂直居中对齐
centerLeft：垂直居中水平居左对齐
centerRight：垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft：底部居左对齐
bottomRight：底部居右对齐
decorationdecoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color:Colors.red,width: 2.0,),
borderRadius:
BorderRadius.all(
Radius.circular(8.0)))
marginmargin 属性是表示 Container 与外部其他组件的距离。EdgeInsets.all(20.0), padding padding 就 是 Container 的 内 边 距 ， 指Container 边缘与 Child 之间的距离padding: EdgeInsets.all(10.0)
transform让 Container 容易进行一些旋转之类,transform: Matrix4.rotationZ(0.2)
height容器高度
width容器宽度
child容器子元素
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: const Text(
          '我是一个文本我是一个文本我是一个文本我是一个文本',
          textAlign: TextAlign.center,
          //最大显示行数
          maxLines: 2,
          //文本超过一行时的显示方式
          overflow: TextOverflow.fade,
          //把文本放大两倍
          textScaleFactor: 2,
          //设置字体样式
          style: TextStyle(
            //字体大小
            fontSize: 16.0,
            //字体颜色
            color: Colors.red,
            //字体加粗
            fontWeight: FontWeight.w800,
            //字体倾斜
            fontStyle: FontStyle.italic,
            //分割线
            decoration: TextDecoration.lineThrough,
            //分割线颜色
            decorationColor: Colors.black,
            //分割线样式
            decorationStyle: TextDecorationStyle.dotted,
            //字间距
            letterSpacing: 3.0
            ),
        ),
        height: 300,
        width: 300,
        decoration: BoxDecoration(
            color: Colors.yellow,
            border: Border.all(
              color: Colors.blue, 
              width: 2.0),
              //设置圆角
              borderRadius: const BorderRadius.all(
              //当里面的值设为150时为一个圆
                Radius.circular(15),
              )
            ),
            //设置内边距
            padding: const EdgeInsets.all(10),
            //设置偏移旋转
            transform: Matrix4.rotationZ(0.1),
            alignment: Alignment.bottomLeft,
      ),
    );
  }
}

在这里插入图片描述

图片组件

图片组件是显示图片的组件
加载图片常用的两种方式

  1. Image.asset()， 本地图片
  2. Image.network() 远程图片

常用属性

名称类型说明
alignmentAlignment图片的对齐方式
color 和colorBlendMode设置图片的背景颜色，通常和 colorBlendMode 配合一起使用这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合
fitBoxFitfit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。
BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain:全图显示，显示原比例，可能会有空隙。
BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat平铺ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。
width宽度 一般结合 ClipOval 才能看到效果
height高度 一般结合 ClipOval 才能看到效果
加载网络图片
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          "https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg",
          //容器中图片显示方位
          alignment: Alignment.topLeft,
          //配置图片的拉伸
          fit: BoxFit.cover,
          ),
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.yellow
        ),
      )
    );
  }
}

在这里插入图片描述

加载本地图片

  1. 在根目录下创建images文件夹，在images文件夹下再创建2.0x,3.0x,4.0x文件夹，然后将我们需要的图片添加到每个文件夹下
    在这里插入图片描述

  2. 在pubspec.yaml文件下添加每张图片的路径

  assets: 
      - images/a.jpg
      - images/2.0x/a.jpg
      - images/3.0x/a.jpg
      - images/4.0x/a.jpg

位置如下图：
在这里插入图片描述
3. 使用

// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.asset(
            "images/a.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
            ),
          ),
        ),
    );
  }
}

在这里插入图片描述

设置圆角及圆形图片
  1. 在Container的decoration中通过设置圆角，然后再添加image实现
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(150),
          image: const DecorationImage(
            image: NetworkImage("https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg"),
            fit: BoxFit.cover
            )
        ),
      )
    );
  }
}

在这里插入图片描述

  1. 通过ClipOval组件类实现
    ClipOval对子组件进行裁剪，如果 child 为正方形时剪裁之后是圆形，如果 child 为矩形时，剪裁之后为椭圆形。
    我们在裁剪图片时还要限制图片为正方形
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
            ),
          ),
        ),
    );
  }
}

在这里插入图片描述
3.CircleAvatar()类处理
这种是专门处理头像的，将图片圆形化

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: const HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: CircleAvatar(
           backgroundImage:NetworkImage("https://cdn.stocksnap.io/img-thumbs/960w/flower-bouquet_X6UBKGVU0Z.jpg")
                ),
        ),
    );
  }
}

在这里插入图片描述

图片占位及错误处理
FadeInImage(
  // 正常显示网络图片
  image: NetworkImage(LocalImage.TEST_NET_IMG),
  // 网络图片加载过程loading中占位图片
  placeholder: AssetImage(LocalImage.CAT_LOGO),
  width: ScreenAdapter.size(68),
  height: ScreenAdapter.size(68),
  fit: BoxFit.cover,
   // 图片加载错误显示的图片
  imageErrorBuilder: (context, error, stackTrace) {
  return Image.asset(
                 LocalImage.CAT_LOGO,
                 width: ScreenAdapter.size(68),
                 height: ScreenAdapter.size(68),
                     );
                   },
           ),
s－010101
关注
专栏目录
Flutter中image 图片组件
越陌度阡
12-15 1421
1. 图片的常用属性 1.alignment 对齐方式 。值为Alignment类型，如：Alignment.topCenter； 2.color 颜色。值为Colors类型，如：Colors.red； 3.colorBlendMode 颜色混合模式。要与color一起设置才有效果，值为BlendMode类型，如：BlendMode.darken； 4.fit 图片的填充方式。值为BoxFit类型，常用的有几下几种： (1).BoxFit.fill 全图显示，图片会被拉伸，并充满父容器......
Flutter之基础组件详解Widget、MaterialApp、Scaffold、Container、Text、Image、ClipOval、ListView...持续更新中
一花一世界 一叶一菩提
08-27 2757
目录 目录 一、根组件Widget 二、顶层组件MaterialApp 三、基础布局组件Scaffold 四、容器组件Container 五、文字组件Text 六、图片组件Image 七、圆形裁切组件ClipOval 八、ListView组件 一、根组件Widget 简介：Widget是所有组件的基类 所有组件都继承自它 要想自定义组件必须继承下边两个类中的其中一个：..................
「 Flutter」Container、Image 和 ListView 控件
军火库
02-24 1776
Container 控件 Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container可以使用矩阵在三维空间进行转换。 class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { r
Image 组件
一个程序员的成长之路。。。
09-26 497
主要参数说明： alignment: 图片的对齐方式 color: 设置图片的背景颜色，通常和 colorBlendMode 配合一起使用，这样可以是图片颜色和背景色混合。上面的图片就是进行了颜色的混合，绿色背景和图片红色的混合 fit: fit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。 BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。 BoxFit.c...
flutter container image FittedBox AspectRatio
a713040869的博客
12-02 198
当container指定了大小时，里面放入图片后，图片是居中自适应的，根据图片的大小，垂直居中或者水平居中。因为Image的默认自适应就是Contain, BoxFit.Contain 如果container中展示图片想按照更多的特性展示，可以在图片外面使用FittedBox，或者就直接使用图片自带的fit特性 FittedBox是一个适应组件，可以对子元素按照某种适应性展示 ...
flutter container/Image/动态List/网格List
Mobius_z的博客
01-17 643
Image: import "package:flutter/material.dart"; void main ()=>runApp(myApp()); class myApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( ...
Flutter开发（2） 常用组件 Container,image
u010963053的博客
05-03 469
Container 容器 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Wi...
Flutter Container组件、Text组件、图片组件Image 、本地图片、远程图片、图片剪切.zip
06-03
本资源主要涵盖了Flutter中的几个核心组件：Container组件、Text组件以及Image组件，同时也涉及到了本地图片和远程图片的加载，以及图片剪切的相关实践。下面将对这些知识点进行详细阐述。 首先，我们来看Flutter的...
flutter text 左对齐_03、从头开始整 Flutter--基本小部件-Text&Image
weixin_30299319的博客
02-06 536
本节大纲教程简介1、阅读对象本篇教程适合新手阅读，老手直接略过2、教程难度初级，本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢正文一、组件化思想我们前面说过 Flutter 是借鉴了 React 的组件化思想，一切皆组件「小部件」，在 Flutter 中一个个组件就是一个类「当然我们知道类就有属性和方法」，为什么要有组件化思想，这是前端的一大进步「可以说 React 功不可没」，组...
Flutter 笔记 | Flutter 容器组件
川峰的博客
05-25 1693
Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flutter容器组件，Flut
Flutter 02 基础组件 Container、Text、Image、Icon、ListView
sziitjin的博客
10-31 815
1）我们也可以使用自定义字体图标。阿里巴巴图标库官网iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。2）假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：3）也可以在pubspec.yaml配置多个字体文件：// 设置图标0xe601,5）使用//使用阿里图标库支持//图标库：https://material.io/tools/icons/
Flutter篇 CircleAvatar组件圆形
独树一枝
02-20 2406
效果如下： 实现代码： Container( child: CircleAvatar( backgroundColor: Colors.amber, radius: ScreenUtil().setSp(50), child: Image.asset('图片路径',width: ScreenUtil().setWidth(50),height: ScreenUtil().setHeight(50),),
Flutter开发 9.Widget-图片加载及展示详解(Image、Container、Decoration、Clip)
xuanwenchao的专栏
03-28 1791
爪爪
Flutter 中的 CircleAvatar 小部件：全面指南
最新发布
smileKH的博客
05-13 780
你可以结合Stack和Stack(clipBehavior: Clip.none, // 允许子控件超出边界),),),],是 Flutter 中一个简单而强大的小部件，它提供了一种快速且一致的方式来展示用户头像。无论是显示单个字符、图片还是图标，都能很好地融入 Material Design 的风格中。掌握的使用，可以帮助你创建出既美观又具有良好用户体验的用户界面。
Flutter如何实现圆形头像框
油焖茄子 的博客
11-14 302
首先，一般来说，从服务器读取的图片一般都是矩形，如果页面需要一个圆形图片，那么这个时候都是前端自己来处理。3. 也可以通过自定义一个Container容器组件来实现，主要就是给Container的decoration属性赋值一个圆角borderRadius 和 一个 Decoration属性。但是相对于CircleAvatar组件，使用ClipOval组件，需要我们自己定义图片的平铺方式，就需要加上fit属性。同理，想要一个圆形头像，那么还是要设定这个元素的宽高，以及图片的URL地址，
flutter图片实现圆形的四种方法
大圣归来圣骑士清欢的博客
10-11 3475
flutter图片实现圆形的四种方法
flutter 文字过长超出范围,Flutter-列内扩展小部件内的文本溢出
weixin_36474829的博客
02-06 510
What I want to achieve is to have a text widget inside a Column of fixed height. When the text is long I want the overflow property which is set to TextOverflow.ellipsis to kick in. The Text widget ha...
Flutter学习笔记-使用decoration对Container圆形装饰
yyxgs的博客
05-10 830
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp ( title.
Flutter 实现圆角图片的多种方式
zsy_2020的博客
04-18 1207
Flutter 实现圆角图片的多种方式：ClipRRect、BoxDecoration 、CachedNetworkImage
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值