美文网首页
Flutter(十三)ConstrainedBox

Flutter(十三)ConstrainedBox

作者: 天色将变 | 来源:发表于2019-07-17 13:14 被阅读0次
    属性
    ConstrainedBox({
        Key key,
        @required this.constraints,
        Widget child,
      }) 
    
    const BoxConstraints({
        this.minWidth = 0.0,
        this.maxWidth = double.infinity,
        this.minHeight = 0.0,
        this.maxHeight = double.infinity,
      });
    
    • 通过constraints,为child增加约束,child必须符合constraints,不符合部分按constraints里定义的来处理。
    • 可以指定最小宽高和最大宽高,如果指定的最小宽和最大宽是同一个值,相当于指定了子widget的宽度为固定值。


      image.png
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: ConstrainedBox(
    //          constraints: BoxConstraints.expand(),//child尽可能大
    //          constraints: BoxConstraints.tightFor(width: 120, height: 120), //指定宽高
    //          constraints: BoxConstraints.tightForFinite(),// 指定宽高,但有默认值,无限大
              constraints: BoxConstraints(
                  minWidth: 100, maxWidth: 300, minHeight: 100, maxHeight: 300),
              child: Container(
                color: Colors.blue,
                height: 10,
                width: 1000,
              )),
        );
      }
    }
    

    如上代码:

    • constraints做里最小宽度高度和最大宽度高度的约束。
    • child内定义了自己的宽高,但都在constraints之外,因此显示时按constraints的约束显示的。
    多个ConstraintedBox嵌套时,最内部的child要符合外层所有的条件。比如嵌套时minWidth=10,minWidth = 40,minWidth=60,那么minWidth=60为准。
    欢迎添加我的微信号:zrf540592766
    欢迎关注我的公众号:Flutter和Dart开发实践
    让我们共同学习进步,It is never too late to learn!
    image.png

    相关文章

      网友评论

          本文标题:Flutter(十三)ConstrainedBox

          本文链接:https://www.haomeiwen.com/subject/fwrqlctx.html