flutter - 如何在颤动中将容器堆叠在另一个容器内部或下方

Question

    import 'package:flutter/material.dart';

void main() {
  runApp(MainScreen());
}

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Column(
        children: <Widget>[
          Stack(
            children: [
              Container(
                height: 250.0,
                width: width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(150),
                    bottomRight: Radius.circular(150),
                  ),
                  color: Colors.redAccent,
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(
                        "Hello World",
                        style: TextStyle(
                            fontSize: 22,
                            fontFamily: "Arial",
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                      Text(
                        "Hello World",
                        style: TextStyle(
                            fontSize: 22,
                            fontFamily: "Arial",
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Stack(
            children: [
              Positioned(
                top: 40,
                left: 20,
                child: Container(
                  height: 500,
                  width: 200,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
} 

我试图添加一个基于同一行的新容器，但找不到如何与另一个容器堆叠，第二个容器使用定位小部件，但没有奏效。毕竟使用堆栈使第一个容器与第二个容器相同，并且定位的小部件仍然没有解决

我试图添加一个基于同一行的新容器，但找不到如何与另一个容器堆叠，第二个容器使用定位小部件，但没有奏效。毕竟使用堆栈使第一个容器与第二个容器相同，并且定位的小部件仍然没有解决

我上传了一张图片，其中包含两个容器，但没有堆叠在底部。谢谢你。

标签： flutterdartwidgetcontainersmaterial-design

Answer 1

如果要将两个容器放入堆栈，则不需要创建两个堆栈。您只需将两个容器放在一个堆栈中，然后用定位包装其中一个。像这样：

    import 'package:flutter/material.dart';

    void main() {
      runApp(MainScreen());
    }

    class MainScreen extends StatelessWidget {
      const MainScreen({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      double width = MediaQuery.of(context).size.width;
      return Scaffold(
        body: Stack(
          children: [
            Container(
              height: 250.0,
              width: width,
              decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(150),
                bottomRight: Radius.circular(150),
              ),
              color: Colors.redAccent,
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                "Hello World",
                style: TextStyle(
                    fontSize: 22,
                    fontFamily: "Arial",
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                "Hello World",
                style: TextStyle(
                    fontSize: 22,
                    fontFamily: "Arial",
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
            ],
          ),
        ),
      ),
      Positioned(
        top: 40,
        left: 20,
        child: Container(
          height: 500,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey,
          ),
        ),
      ),
    ],
  ),
);
}
}