diego-ph-222506-unsplash.jpg

概述

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]),

              ),
            )
          )
          ),
          
        ),
      ),
    );
  }
}

實例效果

103113975F8D87CCB4B3BD8A71572944.png