我如何堆叠窗口小部件彼此重叠的小部件 [英] How do I stack widgets overlapping each other in flutter

问题描述

我需要堆叠以下小部件

我编写了如下代码。但是，它以一些默认填充接连出现。我该怎么做？

  new Row（
 children：< Widget> [
 new Icon（Icons.monetization_on，大小：36.0，颜色：const Color.fromRGBO（218，165，32，1.0）），
 new Icon（Icons.monetization_on，大小：36.0，颜色：const Color.fromRGBO（ 218，165，32，1.0）），
]，
），
  

解决方案

您可以使用

 类StackExample扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
返回新的Sca ffold（
 appBar：new AppBar（），
 body：new Container（
 padding：const EdgeInsets.all（8.0），
高度：500.0，
宽度： 500.0，
 //对齐方式：FractionalOffset.center，
子级：new Stack（
 // alignment：new Alignment（x，y）
子级：< Widget> [
 new Icon（Icons.monetization_on，size：36.0，color：const Color.fromRGBO（218，165，32，1.0）），
 new Positioned（
 left：20.0，
子级：new Icon（Icons.monetization_on，大小：36.0，颜色：const Color.fromRGBO（218，165，32，1.0）），
），
 new Positioned（
 left：40.0 ，
子级：new Icon（Icons.monetization_on，大小：36.0，颜色：const Color.fromRGBO（218，165，32，1.0）），
）
 
]， 
），
），
）
; 
} 
} 
  

这就是您获得一些不错的阴影滴的方法，图标更加突出：

  class StackExample扩展StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new Scaffold（
 appBar：new AppBar（），
正文：新Container（
填充：const EdgeInsets.all（8.0），
高度：500.0，
宽度：500.0，
 //对齐方式：FractionalOffset.center，
子代：new Stack（
 // alignment：new Alignment（x，y）
子代：< Widget> [
 new Container（
装饰：new BoxDecoration（
 borderRadius：BorderRadius.circular（25.0），
框阴影：[
 new BoxShadow（
 blurRadius：5.0，
 offset：const Offset（3.0，0.0），
 color：Colors.grey，
）
] 
） ，
子级：new Icon（Icons.monetization_on，size：36.0，color：const Color.fromRGBO（218，165，32，1.0））），
 new Positioned（
 left：20.0 ，
子级：new Container（
装饰：new BoxDecoration（
 borderRadius：BorderRadius.circular（25.0），
 boxShadow：[
 new BoxShadow（
 blurRadius：5.0，
偏移量：const Offset（3.0，0.0），
颜色：Colors.grey，
）
] 
），
子级：新图标（Icons.monetization_on，大小：36.0，颜色：缺点t Color.fromRGBO（218，165，32，1.0））），
），
新位置（
剩余：40.0，
子级：新Container（
装饰：新BoxDecoration（
 borderRadius：BorderRadius.circular（25.0），
 boxShadow：[
 new BoxShadow（
 blurRadius：5.0，
 offset：const Offset（3.0 ，0.0），
颜色：Colors.grey，
）
] 
）
，孩子：new Icon（Icons.monetization_on，大小：36.0，颜色：const Color.fromRGBO（218，165，32，1.0））），
）
 
]，
），
），
）
; 
} 
} 
  

I need to stack widgets like below

I wrote the code as below. However its coming one after another with some default padding. How can I do like the above?

      new Row(
        children: <Widget>[
          new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
          new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
        ],
      ),

解决方案

You can use a Stack with Positioned to achieve this:

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body:  new Container(
        padding: const EdgeInsets.all(8.0),
          height: 500.0,
          width: 500.0,
          // alignment: FractionalOffset.center,
          child: new Stack(
            //alignment:new Alignment(x, y)
            children: <Widget>[
              new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              new Positioned(
                left: 20.0,
                child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              ),
              new Positioned(
                left:40.0,
                child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
              )

            ],
          ),
        ),
      )
    ;
  }
}

And this how you get some nice shadow drop so the icon stands out more:

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      body:  new Container(
        padding: const EdgeInsets.all(8.0),
          height: 500.0,
          width: 500.0,
          // alignment: FractionalOffset.center,
          child: new Stack(
            //alignment:new Alignment(x, y)
            children: <Widget>[
              new Container(
                decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                ),
                child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              new Positioned(
                left: 20.0,
                child: new Container(
                  decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                ),
                  child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              ),
              new Positioned(
                left:40.0,
                child: new Container(
                  decoration: new BoxDecoration(
                  borderRadius: BorderRadius.circular(25.0),
                  boxShadow: [
                    new BoxShadow(
                      blurRadius: 5.0,
                      offset: const Offset(3.0, 0.0),
                      color: Colors.grey,
                    )
                  ]
                )
                  ,child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),
              )

            ],
          ),
        ),
      )
    ;
  }
}

这篇关于我如何堆叠窗口小部件彼此重叠的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！