如何在父容器之外創建一個容器

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
        ),
        ),
       ]
     );
  }
);
  }
}