Flutter教學目錄持續更新中

Github源代碼持續更新中

1.SizedOverflowBox介紹

一個特定大小的widget，但是會將它的原始約束傳遞給子控件，它可能會溢出。

2.SizedOverflowBox屬性

• size：
• alignment = Alignment.center：
• child：

3.Alignment

• Alignment.topLeft = Alignment(-1.0, -1.0)：
• Alignment.topCenter = Alignment(0.0, -1.0)：
• Alignment.topRight = Alignment(1.0, -1.0)：
• Alignment.centerLeft = Alignment(-1.0, 0.0)：
• Alignment.center = Alignment(0.0, 0.0)：
• Alignment.centerRight = Alignment(1.0, 0.0)：
• Alignment.bottomLeft = Alignment(-1.0, 1.0)：
• Alignment.bottomCenter = Alignment(0.0, 1.0)：
• Alignment.bottomRight = Alignment(1.0, 1.0)：
• Alignment()
• Alignment.lerp()
  關于Alignment之前已經介紹過了：Flutter（44）：Layout組件之Container

4.使用

image.png

          Container(
            color: Colors.blue,
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),

5.OverflowBox與SizedOverflowBox的區別

不了解OverflowBox可以看一下：Flutter（56）：Layout組件之OverflowBox

• OverflowBox自己是沒有寬高的，SizedOverflowBox是有的，尺寸就是size所設置的，下面這個例子就可以看得出來，SizedOverflowBox的父控件Container的尺寸就是100*50，Container自身沒有約束，那么它就會調節自己為子控件大小，但是OverflowBox的父控件Container寬度卻是屏幕寬度，由此可見OverflowBox自己是沒有寬高的。
• SizedOverflowBox是會將原始約束傳遞給子控件，但是OverflowBox就不會了

          Container(
            color: Colors.blue,
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.blue,
            constraints: BoxConstraints(
              maxHeight: 50,
            ),
            child: SizedOverflowBox(
              alignment: Alignment.topCenter,
              size: Size(100, 50),
              child: Container(
                width: 50,
                height: 80,
                color: Colors.amber,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50),
            color: Colors.blue,
            height: 50,
            constraints: BoxConstraints(
              maxHeight: 50,
            ),
            child: OverflowBox(
              alignment: Alignment.topCenter,
              minWidth: 20,
              maxWidth: 100,
              maxHeight: 100,
              minHeight: 20,
              child: Container(
                width: 50,
                height: 120,
                color: Colors.amber,
              ),
            ),
          )

image.png

• 這里可以看到OverflowBox自身是沒有尺寸的，但是SizedOverflowBox是有的
• OverflowBox跟SizedOverflowBox的父控件在有BoxConstraints約束的時候，SizedOverflowBox將約束傳遞給了子控件，導致子控件受到約束后無法溢出，但是OverflowBox卻沒有

下一節：Layout組件之SizedBox

Flutter（57）：Layout組件之SizedBox

Flutter教學目錄持續更新中

Github源代碼持續更新中