如何将两个容器放在彼此之上？

Question

我正在尝试将 2 个容器放在彼此之上。我想要的是展示一颗星，当用户按下星号时，我想打开 5 星，这样他就可以投票了。我不太确定我的想法是否正确。但是，如果我想创建一个容器，并在这个星形容器正上方的另一个容器中显示所有其他按钮，那么按钮如何才能正常计时。我希望你明白我想做什么。因此，当我将星形容器也放在同一个容器中时，它们会在打开所有星形时按下按钮，整个容器将移动不是吗？所以我正在尝试这样做。


class VideoPage extends StatelessWidget {
  static const route = '/Video';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.yellow[300],
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(color: Colors.green[300]),
                ),
                Container(
                  width: 100,
                  color: Colors.orange[300],
                ),
                Container(
                  width: 100,
                  color: Colors.red[300],
                ),
              ],
            ),
          ),
          Container(
            height: 80,
            color: Colors.blue[300],
          ),
        ],
      ),
    );
  }
}

看起来像这样：

我希望橙色的直接在红色的下面，这样第一颗星就会出现，按下它会打开 5 颗星。这可能是我正在尝试的吗？如果是这样请帮助。如果不行请帮忙哈哈

Answer 1

您需要使用的是 Stack 小工具：

Stack(
  children: <Widget>[
    BottomWidget(),
    MiddleWidget(),
    TopWidget(),
  ],
),

children 的最后一个小部件是顶层，结构降序。

更多信息：https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77

编辑：在你的情况下，如果你想要橙色的在下面，你必须在你的结构中做一些改变并将它从你的 Row()

中分离出来

例子

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 Scaffold(
      body: Column(
        children: [
          Container(
            height: 100,
            color: Colors.yellow[300],
          ),
          Stack(
            children: <Widget>[
              
              Container(
                  width: MediaQuery.of(context).size.width *1,
                  height: 200,
                  color: Colors.orange,
                ),
              
             Container(
               height:200,
               child: Row(
              children: [
                Expanded(
                  child: Container(color: Colors.green[300]),
                ),
                
                Container(
                  width: 100,
                  color: Colors.red.withOpacity(0.5),
                ),
              ],
            )),
              
  ],
          
          ),
          Container(
            height: 80,
            color: Colors.blue[300],
          ),
        ],
      ),
    );
  }
}

如何将两个容器放在彼此之上？

How can I set two container on top of each other?

containers

dart

flutter

flutter-design

例子