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

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(),
  ],
),

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

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