目 录CONTENT

文章目录

Flutter 容器控件篇-->Container

俊阳IT知识库
2023-02-27 / 0 评论 / 0 点赞 / 319 阅读 / 1,434 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903956318158862
欢迎访问😃,有任何问题都可留言评论哦~

Flutter 中的Container,其本质就是一个容器,相当于HTML中的div标签

布局行为

Container的布局行为有时候是比较复杂的
一般情况下,Container会遵循如下顺序去尝试布局:

  • 对齐(alignment);
  • 调节自身尺寸适合子节点;
  • 采用width、height以及constraints布局;
  • 扩展自身去适应父节点;
  • 调节自身到足够小。

源码示例

构造函数如下:

Container({
	Key key,
	this.alignment,
	this.padding,
	Color color,
	Decoration decoration,
	this.foregroundDecoration,
	double width,
	double height,
	BoxConstraints constraints,
	this.margin,
	this.transform,
	this.child,
})

属性解释

key

Container 唯一标识符,用于查找更新。

alignment

控制child的对齐方式,如果container或者container的父节点尺寸大于child的尺寸,这个属性设置会起作用,有很多种对齐方式。

例如:
alignment: Alignment.center则是居中对齐等等

padding

decoration内部的空白区域,如果有child的话,child位于padding内部。padding与margin的不同之处在于,padding是包含在content内,而margin则是外部边界,设置点击事件的话,padding区域会响应,而margin区域不会响应。

例如:
padding: EdgeInsets.all(10)则是内边距留白10px

margin

围绕在decoration和child之外的空白区域,不属于内容区域。

例如:
margin: EdgeInsets.only(top: 10)则是内容外边距只有上面留白10px

color

用来设置container背景色,如果foregroundDecoration设置的话,可能会遮盖color效果。

foregroundDecoration

绘制在child前面的装饰。

width

container的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局。

height

container的高度,设置为double.infinity可以强制在高度上撑满。

constraints

添加到child上额外的约束条件。

transform

设置container的变换矩阵,类型为Matrix4。

child

container中的内容widget。

decoration(详解)

绘制在child后面的装饰,设置了decoration的话,就不能设置color属性,否则会报错,此时应该在decoration中进行颜色的设置。

四类:

  • BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像
  • ShapeDecoration:实现四个边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场(竖向椭圆)、 角形(八边角)边色
  • FlutterLogoDecoration:实现Flutter图片
  • UnderlineTabindicator:下划线

BoxDecoration

构造方法:

const BoxDecoration({
	this.color, // 底色
	this.image, // 图片
	this.border, 边色
	this.borderRadius, // 圆角度
	this.boxShadow, // 阴影
	this.gradient, // 渐变
	this.backgroundBlendMode, // 混合Mode
	this.shape = BoxShape.rectangle,  // 形状
})

示例:

边框+圆角

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 边色与边宽度
  color: Color(0xFF9E9E9E), // 底色
  //        borderRadius: new BorderRadius.circular((20.0)), // 圆角度
  borderRadius: new BorderRadius.vertical(top: Radius.elliptical(20, 50)), // 也可设置一边圆角大小
),

阴影

decoration: new BoxDecoration(
    border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 边色与边宽度
// 生成俩层阴影,一层绿,一层黄, 阴影位置由offset决定,阴影模糊层度由blurRadius大小决定(大就更透明更扩散),阴影模糊大小由spreadRadius决定
    boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0),    blurRadius: 10.0, spreadRadius: 2.0), BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],
),

形状(圆形与矩形)

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
  color: Color(0xFF9E9E9E), // 底色
  //        shape: BoxShape.circle, // 圆形,使用圆形时不可以使用borderRadius
  shape: BoxShape.rectangle, // 默认值也是矩形
  borderRadius: new BorderRadius.circular((20.0)), // 圆角度
),

渐变(环形、扫描式、线性)

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
// 环形渲染
  gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)
//扫描式渐变
//        gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)
// 线性渐变
//        gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))
),

背景图像

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFFFF00), width: 0.5), // 边色与边宽度
  image: new DecorationImage(
  image: new NetworkImage('https://avatar.csdn.net/8/9/A/3_chenlove1.jpg'), // 网络图片
  // image: new AssetImage('graphics/background.png'), 本地图片
  fit: BoxFit.fill // 填满
  //          centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),// 固定大小
  ),
),

ShapeDecoration

构造方法 :

const ShapeDecoration({
  this.color,
  this.image,
  this.gradient,
  this.shadows,
  @required this.shape,
})

示例:

除了shape,其他与BoxDecoration一致,shape:

decoration: new ShapeDecoration(
  color: Color(0xFFFF00FF), // 底色
  // 统一四边颜色和宽度
  shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)
// 四个边分别指定颜色和宽度, 当只给bottom时与UnderlineInputBorder一致效果
//          shape: Border(top: b, bottom: b, right: b, left: b)
// 底部线
//          shape: UnderlineInputBorder( borderSide:BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// 矩形边色
//        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
// 圆形边色
//        shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))
// 体育场(竖向椭圆)
//        shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))
// 角形(八边角)边色
//          shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
),

FlutterLogoDecoration

构造方法:

const FlutterLogoDecoration({
  this.lightColor = const Color(0xFF42A5F5), // Colors.blue[400]
  this.darkColor = const Color(0xFF0D47A1), // Colors.blue[900]
  this.textColor = const Color(0xFF616161),
  this.style = FlutterLogoStyle.markOnly,
  this.margin = EdgeInsets.zero,
}) 

Flutter的logo,没啥用!

UnderlineTabindicator

构造方法:

const UnderlineTabIndicator({
  this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
  this.insets = EdgeInsets.zero,
})

示例:

加下划线,可以设置Insets值(控制下划高底,左右边距)

decoration: new UnderlineTabIndicator(
  borderSide: BorderSide(width: 2.0, color: Colors.white),
  insets: EdgeInsets.fromLTRB(0,0,0,10)
),

Q_Q

0

评论区