Flutter 限定最大最小宽高布局

Flutter 限定最大最小宽高布局(ConstrainedBox)ConstrainedBox的作用是限定子元素child的最大宽度、最大高度、最小宽度和最小高度。ConstrainedBox主要属性如下所示:

属性名 类型 说明constraintsBoxConstraints添加到child上的额外限制条件,其类型为BoxConstraints

BoxConstraints的作用就是限制各种最大最小宽高。childWidget子元素,任意Widget。

接下来我们写一个小示例,示例中在一个宽高为300.0的Container上添加一个约束最大最小宽高的ConstrainedBox,实际显示中,则是一个宽高为220.0的区域。示例代码如下:

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ConstrainedBox限定宽高示例'),
      ),
      // 添加容器
      body: ConstrainedBox(
        // 设置限定值
        constraints: const BoxConstraints(
          minWidth: 150.0,
          minHeight: 150.0,
          maxWidth: 220.0,
              maxHeight: 220.0,
            ),
            // 子容器
            child: Container(
              width: 300.0,
              height: 300.0,
              color: Colors.green,
            ),
          ),
        );
      }
    }

    void main() {
      runApp(
        MaterialApp(
          title: 'ConstrainedBox限定宽高示例',
          home: LayoutDemo(),
        ),
      );
    }

注意 如果child不为null,则将限制条件加在child上。如果child为null,则会尽可能地缩小尺寸。

上述示例代码的视图展现大致如图所示:
Flutter 限定最大最小宽高布局

酷客教程相关文章:

赞(0)

评论 抢沙发

评论前必须登录!