LayoutBuilder(
builder: (context,constraints){
context为父级上下文
constraints.biggest.height; 获取组件在父组件所能设置的最大高度
contraints.maxWidth; 获取父组件宽度,高度同理
return 组件
}
)
利用LayoutBuilder画一个进度条控件,代码示例:
class RoundLinearProgressIndicator extends StatelessWidget {
final double percent;
final Color progressColor;
final Color backgroundColor;
final int height;
final int radius;
RoundLinearProgressIndicator(this.percent,{this.progressColor =BeautyColors.app_primary,this.backgroundColor =BeautyColors.app_primary,this.height=14,this.radius=7});
@override
Widget build(BuildContext context) {
double temp =percent;
if(temp >1){
temp = 1;
} else if(percent < 0){
temp = 0;
}
return LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints){
return Container(
// margin: EdgeInsets.only(left: 41, right: tyW(40), top: 68),
child: Stack(
children: <Widget>[
Container(
width: constraints.maxWidth,
height: height.h,
decoration: new BoxDecoration(
color:backgroundColor.withOpacity(0.06),
// color:BeautyColors.progress_bg.withOpacity(0.04),
borderRadius: new BorderRadius.circular((radius.h)), // 圆角度
),
),
Positioned(
left: 0,
child: Container(
width: constraints.maxWidth*temp,
height: height.h,
decoration: new BoxDecoration(
color:progressColor,
borderRadius: new BorderRadius.circular((radius.h)), // 圆角度
),
),
)
],
),
);
});
}
}
RoundLinearProgressIndicator(7/9);