如何将图像放置在堆栈的顶部？

Question

所以我试图在顶部放置一个图像，然后在其下方放置一个列表。最初，该列表是收缩的。当列表展开时，我希望它与图像重叠。

初始位置 - 我希望图像位于顶部

最终位置 - 这是正确的

问题是 - 如果我将图像放在顶部，列表也会移动到顶部（在初始位置），这不是我想要的。此外，如果我使用一列将图像放置在顶部（及其下方的列表），那么列表不会一直扩展到顶部；它保持（并扩展）在图像下方。

@override
Widget build(BuildContext context) {
double maxHeight = MediaQuery.of(context).size.height;
return Scaffold(
  //resizeToAvoidBottomInset: false,
  //backgroundColor: Color(0xFFd8e3e3),
  body: Align(
    child: SingleChildScrollView(
      //to avoid bottom overflow error
      child: Padding(
        padding: const EdgeInsets.fromLTRB(5, 20, 5, 0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              //fit: StackFit.loose,
              //alignment: Alignment.center,
              children: [
                // Positioned(
                //   top: 0,
                //   left: 0,
                //   right: 0,
                Align(
                  alignment: Alignment(0, -1),
                  child: Hero(
                    tag: "imageHero",
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(30),
                        bottomRight: Radius.circular(30),
                      ),
                      child: Image.asset(
                        'assets/images/punjabi_egg_curry1.jpeg',
                        //height: screenHeight * 0.3,
                        //width: double.infinity,
                        alignment: Alignment.topCenter,
                      ),
                    ),
                  ),
                ),
                // ),
                Center(
                  child: new ClipRect(
                    child: new BackdropFilter(
                      filter:
                          new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                      child: new Card(
                        color: Colors.transparent,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0),
                        ),
                        child: new Center(
                          //child: GestureDetector(
                          //onTap: _updateSize,
                          child: Padding(
                            padding: const EdgeInsets.only(bottom: 10),
                            child: Column(
                              children: [
                                AnimatedContainer(
                                  constraints: BoxConstraints(
                                      maxHeight: maxHeight * 0.85),
                                  height: _height,
                                  duration: Duration(milliseconds: 300),
                                  decoration: new BoxDecoration(
                                    color: Colors.transparent,
                                    borderRadius: BorderRadius.circular(20),
                                    //border: Border.all(color: Colors.black),
                                  ),
                                  child: Steps(),
                                ),
                                //),
                                ElevatedButton(
                                  onPressed: _updateSize,
                                  child: Text(buttonText),
                                  style: ElevatedButton.styleFrom(
                                    padding: EdgeInsets.symmetric(
                                      vertical: 10,
                                      horizontal: 20,
                                    ),
                                    primary: kSilver,
                                    shape: RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(20),
                                    ),
                                    onPrimary: Colors.black,
                                    textStyle: TextStyle(
                                      color: Colors.black,
                                      fontSize: 22,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                // ),
              ],
            ),
          ],
        ),
      ),
    ),
  ),
  //),
);
}
}

Answer 1

用 Positioned(top:5, child: // your widget ) 包裹那个小部件，

Answer 2

试试下面的代码，希望它可以帮助您根据需要更改图像

      Container(
              height: 500,
              child: Stack(
                children: [
                  Container(
                    width: 150,
                    height: 150,
                    margin: EdgeInsets.symmetric(horizontal: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage(
                          'assets/images/cycle.png',
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    top: 120,
                    left: 0,
                    right: 0,
                    child: Container(
                      height: 100,
                      child: ListView.builder(
                        itemCount: 20,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(
                            title: Text("List - $index"),
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),

您的结果屏幕 ->