第7章页面布局-OverflowBox溢出父容器显示

最新推荐文章于 2024-05-27 23:53:34 发布

原创最新推荐文章于 2024-05-27 23:53:34 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

97 篇文章

订阅专栏

本文详细介绍了Flutter中OverflowBox组件的使用方法，展示了如何让子组件溢出其父容器并控制最大宽度和高度，适用于需要灵活布局的场景。

防采集标记：亢少军老师的课程和资料

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('OverflowBox溢出父容器显示示例'),
        ),
        body: Container(
          color: Colors.green,
          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.blueGrey,
              width: 400.0,
              height: 400.0,
            ),
          ),
        ));
  }
}

void main() {
  runApp(
    new MaterialApp(
      title: 'OverflowBox溢出父容器显示示例',
      home: new LayoutDemo(),
    ),
  );
}