【问题标题】:Flutter child is hiding under another child when it is not placed in a stack widget当 Flutter 子项未放置在堆栈小部件中时,它隐藏在另一个子项下
【发布时间】:2019-07-22 22:39:03
【问题描述】:

我尝试将带有文本的容器放在 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")
                  ],
                ),
              ),
            ],
          ),
        );
      }
    }

【问题讨论】:

标签: flutter dart widget


【解决方案1】:

我测试了你的代码。

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

堆栈子项中的小部件按书写顺序显示。堆栈以第一个widget为大小,之后添加的widget依次叠加在顶层。

【讨论】:

    猜你喜欢
    • 2012-12-07
    • 1970-01-01
    • 2020-04-08
    • 1970-01-01
    • 2019-11-19
    • 1970-01-01
    • 2020-11-01
    • 2019-03-09
    • 2021-12-15
    相关资源
    最近更新 更多