Flutter OverflowBox 在列中的下一个小部件后面

Posted 2023-02-21

【中文标题】Flutter OverflowBox 在列中的下一个小部件后面

【英文标题】：Flutter OverflowBox is behind the next widget in a column

【发布时间】：2021-05-11 17:14:49

【问题描述】：

我正在开发一个 Flutter 项目，我正在尝试使用 OverflowBox 小部件。

我在Column 中有一个小部件列表，其中一个，根据用户的某些事件，中间应该溢出其他小部件。

这是我的代码的简化版本。

红色的Container 需要显示在顶部和底部溢出的绿色Container。 但正如您在图像上看到的那样，绿色的Container 仅在前一个Container（蓝色）上方可见，但在下一个（黑色Container）上不可见。好像落后了。

class MyScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 100,
          width: 100,
          color: Colors.blue,
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.red,
          child: Center(
            child: OverflowBox(
              maxHeight: 150,
              child: Container(
                color: Colors.green,
                height: 150,
                width: 50,
              ),
            ),
          ),
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.black,
        )
      ],
    );
  

我怎样才能让我的绿色Container 也高于黑色？

---

编辑：出于功能目的，我需要将绿色 Container 作为子级/由红色 Container 创建（而不是由我可以使用 Stack 小部件的列表创建）。我需要将逻辑放在红色和绿色的内部。

【问题讨论】：

你解决了吗？

不，我没能解决这个@BradenBagby :/

【参考方案1】：

它仍然使用 Stack，但 Green Container 仍然是 Red Container 的一部分。

如果 Container 具有动态高度，则可能难以计算边距。

class MyScreen extends StatelessWidget 
  const MyScreen(Key key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
          Container(
            margin: const EdgeInsets.only(top: 200),
            height: 100,
            width: 100,
            color: Colors.black,
          ),
          Container(
            margin: const EdgeInsets.only(top: 100),
            height: 100,
            width: 100,
            color: Colors.red,
            child: Center(
              child: OverflowBox(
                maxHeight: 150,
                child: Container(
                  height: 150,
                  width: 50,
                  color: Colors.green,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  

【讨论】：

这不符合我的需要。我遵循颤振原则，约束减少，尺寸增加。该列表无法知道每个 Containers 的大小以将它们放在 Stack 中（这是一个简化的代码）。

这个怎么样？ imgur.com/a/f5hyCbv

【参考方案2】：

我尝试将您的代码剪断，但未能获得您特别希望实现的设计。

我有另一种方法来获得这种类型的设计。哪个 ia 使用 Stacl() 小部件

这里是完整的示例代码sn-p

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyScreen(),
        ),
      ),
    );
  


class MyScreen extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Stack(
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: MediaQuery.of(context).size.height/3,
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
            ),
            Container(
              height: MediaQuery.of(context).size.height/3,
              width: MediaQuery.of(context).size.width,
              color: Colors.red,
            ),
            Container(
              height: MediaQuery.of(context).size.height/3,
              width: MediaQuery.of(context).size.width,
              color: Colors.black,
            )
          ],
        ),
        Positioned(
          
          // to set a specific position of your widget use Positioned inside a Stack() widget
          
          /*
          bottom: 50,
          top: MediaQuery.of(context).size.height/3,
          left: 100,
          right: 100,
          */
          child: OverflowBox(
            child: Container(
              color: Colors.green,
              height: MediaQuery.of(context).size.height/2,
              width: 100,
            ),
          ),
        ),
      ],
    );
  

输出：

【讨论】：

您好，感谢您的努力，但是我需要控制绿色小部件/红色小部件的子项，因为它将成为功能的一部分（此处以蓝色和深色小部件为例关于它将如何包含在屏幕中）：/