Flutter コンポーネント - OverflowBox、SizedOverflowBox (サブコンポーネントが親コンポーネントのクロッピングを超える)

1.OverflowBoxの紹介

OverflowBox 子コントロールが親コントロールの境界を超えて拡張できるようにします。この機能は、主にテキストまたはボタンのコーナー マークを実現するために使用できます。

オーバーフロー ボックス コンストラクター

const OverflowBox({
  Key? key,
  this.alignment = Alignment.center,
  this.minWidth,
  this.maxWidth,
  this.minHeight,
  this.maxHeight,
  Widget? child,
}) : super(key: key, child: child);

OverflowBox のプロパティと説明

シリアルナンバー	分野	属性	説明
1	アラインメント	配置ジオメトリ	サブコンポーネントの配置
2	最小幅	ダブル	最小幅
3	最大幅	ダブル	最大幅
4	最小高さ	ダブル	最低身長
5	最大高さ	ダブル	最大高さ

OverflowBox の基本的な使い方

import 'package:flutter/material.dart';

class OverflowBoxExample extends StatefulWidget {
  @override
  _OverflowBoxExampleState createState() => _OverflowBoxExampleState();
}

class _OverflowBoxExampleState extends State<OverflowBoxExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("OverflowBoxExample"),
      ),
      body: Container(
        color: Colors.pink,
        width: 200.0,
        height: 200.0,
        padding: const EdgeInsets.all(5.0),
        child: OverflowBox(
          alignment: Alignment.topLeft,
          maxWidth: 300.0,
          maxHeight: 500.0,
          child: Container(
            color: Colors.greenAccent,
            width: 1000.0,
            height: 1000.0,
          ),
        ),
      ),
    );
  }
}

オーバーフローボックス効果表示

緑のボックスがピンクのボックスの制約を無視していることがわかります。

2.SizedOverflowBox 

SizedOverflowBox 2 つの主なレイアウト動作があります。

• サイズ部分:子のサイズを制御する目的を達成するために、独自の固定サイズを子に渡します; 未定義
• 超過部分:親ノードのサイズ制限を突破でき、超過部分もOverflowBox同様にレンダリングして表示できます。

SizedOverflowBox コンストラクター

const SizedOverflowBox({
  Key? key,
  required this.size,
  this.alignment = Alignment.center,
  Widget? child,
}) : assert(size != null),
     assert(alignment != null),
     super(key: key, child: child);

 SizedOverflowBox のプロパティと説明

シリアルナンバー	分野	属性	説明
1	サイズ	サイズ	サイズ制限
2	アラインメント	配置ジオメトリ	サブコンポーネントの配置
3	子供	ウィジェット	サブアセンブリ

SizedOverflowBox の基本的な使い方

import 'package:flutter/material.dart';

class OverflowBoxExample extends StatefulWidget {
  @override
  _OverflowBoxExampleState createState() => _OverflowBoxExampleState();
}

class _OverflowBoxExampleState extends State<OverflowBoxExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("OverflowBoxExample"),
      ),
      body: Container(
        color: Colors.orangeAccent,
        alignment: Alignment.bottomRight,
        width: 200.0,
        height: 200.0,
        // padding: EdgeInsets.all(5.0),
        child: SizedOverflowBox(
          size: Size(190.0, 200.0),
          child: Container(
            color: Colors.blueAccent,
            width: 200.0,
            height: 100.0,
          ),
        ),
      )
    );
  }
}

SizedOverflowBox 効果の表示

要約する

OverflowBox 子コントロールが親コントロールの境界を超えて拡張できるようにします。この機能は、主にテキストまたはボタンのコーナー マークを実現するために使用できます。

SizedOverflowBox また、子コントロールが親コントロールの境界を超えることもできますが、OverflowBox子コンポーネントのサイズも制限できるという点で異なります。