保健品网站设计,怎么做自我介绍网站,江苏网站推广公司,做网站首页cdr#x1f525; 英文单词FittedBox #x1f525;
Fitted 通过有道翻译如下 #xff1a; Box 通过有道翻译如下 #xff1a; 对 FittedBox 的理解 我们可以将 FittedBox 理解为合适的盒子#xff0c;将其它布局放到FittedBox这样一个盒子中#xff0c;从而实现 盒子里面的… 英文单词FittedBox
Fitted 通过有道翻译如下 Box 通过有道翻译如下 对 FittedBox 的理解 我们可以将 FittedBox 理解为合适的盒子将其它布局放到FittedBox这样一个盒子中从而实现 盒子里面的子布局更好的放置。 参考 Flutter实战 空间适配FittedBox 为什么使用 FittedBox
使用 FittedBox 的原因 在开发的过程中经常会遇到子widget大小超过父widget大小的现象。子widget应该遵循父widget的约束如果子widget的原始大小超过了父原始视图的大小就需要进行相应的处理比如缩小、裁剪等。 如果父 widget 宽度固定高度不固定则默认情况下 Text 会在文本到达父组件宽度的时候换行。 如果我们想让 Text 文本在超过父组件的宽度时不要换行而是字体缩小这时候就需要用到 FittedBox 组件。 Text 文本溢出 Row(children: [Text(文本内容过长就超出屏幕宽度/ * 30,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],
) Image 加载网络图片溢出 Row(children: [Image.network(https://www.2008php.com/2011_Website_appreciate/2011-03-28/20110328134546.jpg),],
) FittedBox 属性 final BoxFit fit ; // 适配方式final AlignmentGeometry alignment ;// 对齐方式final Clip clipBehavior ;// 是否剪裁 BoxFit.none 显示屏幕范围宽度的内容, 超过屏幕范围的内容不显示 FittedBox(fit: BoxFit.none,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 7,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),) BoxFit.contain 文本所有内容都显示到屏幕范围内按字体大小进行缩小 FittedBox(fit: BoxFit.contain,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 7,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),
) BoxFit.fitWidth / fitHeight 需要设置 FittedBox 的大小不然设置 BoxFit.fitWidth 和 BoxFit.fitHeight 无效。 当没有设置 FittedBox 大小时文本始终显示在屏幕的范围内填充屏幕宽度。 SizedBox(/*height: 20.w,width: double.infinity,*/child: FittedBox(fit: BoxFit.fitHeight,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) SizedBox(/*height: 20.w,width: double.infinity,*/child: FittedBox(fit: BoxFit.fitWidth,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) 当设置 FittedBox 大小时文本始终显示在屏幕的范围内如果是 BoxFit.fitWidth 以填充屏幕宽度的形式展示文本如果是 BoxFit.fitHeight 以填充屏幕高度的形式展示文本。 SizedBox(height: 50.w,width: double.infinity,child: FittedBox(fit: BoxFit.fitHeight,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) SizedBox(height: 50.w,width: double.infinity,child: FittedBox(fit: BoxFit.fitWidth,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) Boxfit.scaleDown 保证不超过 父 Widget的大小。如果字体原始的高度比父容器的高度小那么就按照父容器的高度进行缩小如果原始字体宽度比父容器的宽度小就按照父容器的宽度进行缩小。 SizedBox(height: 10.w,width: double.infinity,child: FittedBox(fit: BoxFit.scaleDown,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) SizedBox(height: 40.w,width: double.infinity,child: FittedBox(fit: BoxFit.scaleDown,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) Boxfit.fill 保证不超过 父 Widget的大小。如果字体原始的高度比父容器的高度小那么久拉伸字体高度到容器高度相反就压缩字体高度到父容器高度。 SizedBox(height: 140.w,width: double.infinity,child: FittedBox(fit: BoxFit.fill,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) SizedBox(height: 14.w,width: double.infinity,child: FittedBox(fit: BoxFit.fill,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) Boxfit.cover 内容按照原始尺寸填充父容器的宽或者高但可能会超过父容器的范围。 如果字体原始高度小于 父容器高度这时候就填充高度 可能会出现超过父容器范围的情况。 如果字体原始高度不小于 父容器高度这时候就填充宽度不会出现超过父容器的情况。 SizedBox(height: 80.w,width: double.infinity,child: FittedBox(fit: BoxFit.cover,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) SizedBox(height: 2.w,width: double.infinity,child: FittedBox(fit: BoxFit.cover,child: Row(children: [Text(文本内容过长就超出屏幕宽度/ * 3,style: TextStyle(color: Colors.blue, fontSize: 60.sp),),],),),) Clip.none 如果子Widget的高度超过父视图的高度不做裁剪那么高度就显示成子视图的高度。 Container(width: 160,height: 150,color: Colors.red,child: FittedBox(fit: BoxFit.fitWidth,clipBehavior: Clip.none,child: Container(width: 160, height: 200, color: Colors.blue),),) 剪切前 Clip.hardEdge 如果子Widget的高度超过父视图的高度就进行裁剪高度就显示成夫视图的高度。 Container(width: 160,height: 150,color: Colors.red,child: FittedBox(fit: BoxFit.fitWidth,clipBehavior: Clip.hardEdge,child: Container(width: 160, height: 200, color: Colors.blue),),) 剪切后 裁剪超范围区域 ClipRect(// 将超出子组件布局范围的绘制内容剪裁掉child: Container(width: 50,height: 50,color: Colors.red,child: FittedBox(fit: BoxFit.none,child: Container(width: 60, height: 70, color: Colors.blue),),),) 打印布局时的约束信息 class LayoutLogPrintT extends StatelessWidget {const LayoutLogPrint({Key? key,this.tag,required this.child,}) : super(key: key);final Widget child;final T? tag; //指定日志tagoverrideWidget build(BuildContext context) {return LayoutBuilder(builder: (_, constraints) {// assert在编译release版本时会被去除assert(() {if (kDebugMode) {print(${tag ?? key ?? child}: $constraints);}return true;}());return child;});}
}Column(children: [wRow( 内容是否发生溢出/ ),FittedBox(child: wRow( 内容是否发生溢出/ )),].map((e) Padding(padding: const EdgeInsets.symmetric(vertical: 20),child: e,)).toList(),) // 直接使用RowWidget wRow(String text) {Widget child Text(text,style: const TextStyle(color: Colors.black, fontSize: 20.0),);child Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [child, child, child],);return LayoutLogPrint(child: child);} I/flutter (13152): Row(direction: horizontal, mainAxisAlignment: spaceEvenly, crossAxisAlignment: center): BoxConstraints(0.0w392.7, 0.0hInfinity)
I/flutter (13152): Row(direction: horizontal, mainAxisAlignment: spaceEvenly, crossAxisAlignment: center): BoxConstraints(unconstrained)使用FittedBox也发生溢出 class SingleLineFittedBox extends StatelessWidget {const SingleLineFittedBox({Key? key,this.child}) : super(key: key);final Widget? child;overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (_, constraints) {return FittedBox(child: ConstrainedBox(constraints: constraints.copyWith(//让 maxWidth 使用屏幕宽度maxWidth: constraints.maxWidth),child: child,),);},);}
}Column(children: [wRow( 内容是否发生溢出 ),SingleLineFittedBox(child: wRow( 内容是否发生溢出 )),wRow( 少内容 ),FittedBox(child: wRow( 内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤内容太挤 ),)].map((e) Padding(padding: const EdgeInsets.symmetric(vertical: 20),child: e,)).toList(),) // 直接使用RowWidget wRow(String text) {Widget child Text(text,style: const TextStyle(color: Colors.black, fontSize: 16.0),);child Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [child, child, child],);return child;} SingleLineFittedBox 中将传给 Row 的 maxWidth 置为屏幕宽度后效果和不加 SingleLineFittedBox 的效果是一样的。 解决方案 最小宽度minWidth约束指定为屏幕宽度 因为Row必须得遵守父组件的约束所以 Row 的宽度至少等于屏幕宽度所以就不会出现缩在一起的情况同时我们将 maxWidth 指定为无限大 (double.infinity)则就可以处理数字总长度超出屏幕宽度的情况。
