一统天下 flutter - widget 容器类(只能有一个子): SizedBox - 确定宽高

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 容器类(只能有一个子): SizedBox - 确定宽高

示例如下:

lib\widget\container\sized_box.dart

/*
 * SizedBox - 确定宽高(SizedBox 会告诉其子元素宽和高是多少)
 *   width - 宽,设置为 double.infinity 代表尽量宽
 *   height - 高,设置为 double.infinity 代表尽量高
 */

import 'package:flutter/material.dart';

class SizedBoxDemo extends StatelessWidget {
  const SizedBoxDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        SizedBox(
          width: 200,
          height: 100,
          /// SizedBox 设置了宽和高,则其子元素的宽和高会强制与 SizedBox 的宽和高相同
          /// 结果 Container 的宽为 200,高为 100
          child: Container(
            width: 1,
            height: 1,
            color: Colors.red,
          ),
        ),
        SizedBox(
          width: 200,
          /// SizedBox 如果没设置宽或高,则其子元素自行确定宽或高
          /// 结果 Container 的宽为 200,高为 30
          child: Container(
            width: 1,
            height: 30,
            color: Colors.green,
          ),
        ),

        SizedBox(
          width: 200,
          height: 200,
          /// SizedBox.expand() 是一个宽和高都是 double.infinity 的 SizedBox
          child: SizedBox.expand(
            child: Container(
              color: Colors.blue,
            ),
          ),
        ),
      ],
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-03-22 10:21  webabcd  阅读(14)  评论(0编辑  收藏  举报