如何将两个容器放在一起？

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 Widget：

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

孩子的最后一个小部件是顶层，结构递减。

更多信息：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],
          ),
        ],
      ),
    );
  }
}