如何在父容器之外创建一个容器

Question

我的尝试是什么样的：

我想做的事：

我尝试过的是 Stack 小部件。 但是当容器移到外面时，容器的一半变得看不见了。

Stack(
        children: [
          Align(
            alignment: new Alignment(0.0, 0.0),
            child: Container(
              height: 150,
              width: double.infinity,
              decoration: BoxDecoration(color: Colors.red),
            ),
          ),
          Positioned(
              top: -15,
              left: 140,
              child: Container(
                height: 50,
                width: 100,
                decoration: BoxDecoration(color: Colors.black),
              )),
        ],
      )

欢迎提供任何信息。

答：只需在主容器中添加Padding

Answer 1

尝试使用转换

 return Container(
  width: 400,
  height: 200,
  child: Stack(
    children: <Widget>[
      Align(alignment: Alignment.topCenter,
        child: Transform.translate(
          child: Container(
            width: 100,
            height: 50,
            color: Colors.green,
            child: Text('some text'),
          ),
          offset: Offset(0, -20),
        ),
      ),
    ],
  ),
  color: Colors.red,
);

Answer 2

您在使用Stack小部件时是正确的。 代码如下所示：

Center(
        child: Stack(
          alignment: Alignment.topCenter,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 25,),
              child: Container(
                color: Colors.green,
                height: 200,
                width: 200
              ),
            ),
            Container(
              color: Colors.red,
              height: 50,
              width: 100
            ),
          ]
        ),
      ),

通过向绿色容器添加顶部填充，您可以将其向下推，从而为红色容器腾出空间，使其位于顶部。

结果如下所示：

Answer 3

在一个容器上使用Stack和Padding来降低它。

 return Stack(
       children: [
         Align(
           alignment: Alignment.topCenter,
           child: Padding(
           padding: EdgeInsets.only(top: 10),
           child: Container(
            width: 400,
            height: 100,
            color: Colors.white
          ),
         ),
         ),
        Align(
          alignment: Alignment.topCenter,
          child: Container(
           width: 70,
           height: 30,
           color: Colors.red
        ),
        ),
       ]
     );

使用 dartpad.dev/flutter 完全按照您的意愿查看结果的完整代码粘贴此代码：

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: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Builder(
  builder: (context){
     return Stack(
       children: [
         Align(
           alignment: Alignment.topCenter,
           child: Padding(
           padding: EdgeInsets.only(top: 10),
           child: Container(
            width: 400,
            height: 100,
            color: Colors.white
          ),
         ),
         ),
        Align(
          alignment: Alignment.topCenter,
          child: Container(
           width: 70,
           height: 30,
           color: Colors.red
        ),
        ),
       ]
     );
  }
);
  }
}