繁体   English   中英

未将Flutter子项放置在堆栈小部件中时,该子项隐藏在另一个子项下

[英]Flutter child is hiding under another child when it is not placed in a stack widget

我试图将带有文本的容器放在Stack子项之外,但它仍位于堆栈中其他子项的下面。 我该如何解决?

    import 'package:flutter/material.dart';

    class StoreFront extends StatefulWidget {
      @override
      _StoreFrontState createState() => _StoreFrontState();
    }

    class _StoreFrontState extends State<StoreFront> {
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 150,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(bottom: 10.0),
                height: 80.0,
                child: Stack(
                  children: <Widget>[
                    Container(
                      height: 800,
                      width: 370,
                      decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(250.0))),
                      child: Image(
                          image: AssetImage("assets/images/newlookfront.png"),
                        fit: BoxFit.fill,
                      ),
                    ),
                    Positioned(
                      bottom: 60,
                      left: 65.0,
                      child: Row(
                        children: <Widget>[
                          Text("NEW LOOK", style: TextStyle(color: Colors.white70, fontSize: 35.0),)
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                child: Row(
                  children: <Widget>[
                    Text("New Look")
                  ],
                ),
              ),
            ],
          ),
        );
      }
    }

我测试了您的代码。

Container(
    height: 150,
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(bottom: 10.0),
          height: 80.0,
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                height: 800,
                width: 370,
                decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(250.0))),
                child: Image(
                  image: AssetImage("assets/images/intro_0.jpg"),
                  fit: BoxFit.fill,
                ),
              ),
              Container(
                child: Row(
                  children: <Widget>[
                    Text("New Look")
                  ],
                ),
              ),
              Positioned(
                bottom: 60,
                left: 65.0,
                child: Row(
                  children: <Widget>[
                    Text("NEW LOOK", style: TextStyle(color: Colors.cyan, fontSize: 35.0),)
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  )

堆栈的子代中的小部件按书写顺序显示。 堆栈具有第一个窗口小部件作为其大小,其后添加的窗口小部件依次叠加在顶层。

代码截图

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM