栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

Flutter 基础布局Widgets之ConstrainedBox详解

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Flutter 基础布局Widgets之ConstrainedBox详解

概述

ConstrainedBox即创建一个Widget,该Widget对其子child施加附加约束。之前在constrain也有简单使用,即该组件一般集成在constrain中使用。

构造函数
ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child
  })

  • constraints 其类型为BoxConstraints,一些基本的约束:

[RenderBox]布局的不可变布局约束。
如果且仅当以下所有关系成立时,[Size]才会遵从[BoxConstraints]:
[minWidth] <= [Size.width] <= [maxWidth]
[minHeight] <= [Size.height] <= [maxHeight]
约束本身必须满足这些关系:
0.0 <= [minWidth] <= [maxWidth] <= [double.infinity]
0.0 <= [minHeight] <= [maxHeight] <= [double.infinity]
[double.infinity]是每个约束的合法值(比如想要获取最大的扩展宽度,可以将宽度值设为double.infinity)

constraints构造函数
const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity
  })

  • minWidth 满足约束条件的最小宽度
  • maxWidth 满足约束条件的最大宽度;可能是[double.infinity](1.0 / 0.0)
  • minHeight 满足约束条件的最小高度
  • maxHeight 满足约束条件的最大高度;可能是[double.infinity](1.0 / 0.0)

  • child 受约束的子child
示例代码
// ConstrainedBox  

import 'package:flutter/material.dart';

class ConstrainedBoxLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
 title: Text('ConstrainedBox')
      ),
      body: Center(
 child: Container(
   width: 300,
   height: 400,
   decoration: BoxDecoration(
     border: Border.all()
   ),
   //利用UnconstrainedBox 消除之前限制
   child: UnconstrainedBox(
     // 对child进行约束,
     child: ConstrainedBox(
     constraints: BoxConstraints(
minHeight: 30,
minWidth: 30,
maxHeight: 150,
maxWidth: 150
     ),
     child: Container(
width: 110,
height: 110,
decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(20),
  gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),

),
     )
   )
   ),
   
 ),
      ),
    );
  }
}
实例效果

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号