Flutter学习

flutter 获取父组件大小并布局容器LayoutBuilde

2021-03-16  本文已影响0人  三也视界
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);
image.png
上一篇 下一篇

猜你喜欢

热点阅读