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

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

我正在尝试将 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],color: Colors.red[300],],Container(
            height: 80,color: Colors.blue[300],);
  }
}

看起来像这样：

我希望橙色的直接在红色的下面，所以会有第一颗星，按下它会打开 5 颗星。这可能是我在尝试的吗？如果是这样，请帮忙。如果没有请帮忙哈哈

解决方法

您需要使用的是 Stack 小部件：

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