dart 如何在Flutter中将一个小部件放在另一个小部件之上?

kfgdxczn  于 12个月前  发布在  Flutter
关注(0)|答案(5)|浏览(122)

我想覆盖一个圆形视图上的背景视图,就像下面这个截图。


的数据

v2g6jxz6

v2g6jxz61#

如果你想只显示一个基于索引的子目录,你也可以使用IndexedStack

IndexedStack(
  index: 0,
  children: [
    FooWidget(), // Visible if index = 0
    BarWidget(), // Visible if index = 1
  ],
)

字符串

v09wglhw

v09wglhw2#

解决方案一

可以使用be_widgets覆盖小部件作为标签或徽章。它类似于堆栈,但非常灵活,徽章或标签绘制在子部件上,有助于忽略覆盖小部件的大小。

方案二

您可以使用assorted_layout_widgets并使用负值的RowSuperColumnSuper内部间距(innerDistance)进行叠加

bvhaajcl

bvhaajcl3#

@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
  width: 150.0,
  height: 150.0,
  child: new Stack(children: <Widget>[
    new Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text('Hello'),
    ),
    new Align(alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        child: new Icon(Icons.add),
          onPressed: (){}),
    )
  ],
  ),
);
}

字符串


的数据

8mmmxcuj

8mmmxcuj4#

您可以使用Stack小部件。

Stack(
  children: [
    /*your_widget_1*/,
    /*your_widget_2*/,
  ],
);

字符串

kd3sttzy

kd3sttzy5#

Stack(
                alignment: Alignment.topRight,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ClipRRect(
                      child: Image.network(
                        image,
                        height: 150,
                        width: 100,
                        fit: BoxFit.fitHeight,
                      ),
                      borderRadius: new BorderRadius.circular(8.0),
                    ),
                  ),
                  new Align(alignment: Alignment.topRight,
                    child:ClipRRect(
                      borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(30),
                          bottomLeft: Radius.circular(30),
                          topRight: Radius.circular(30)),
                      child: RaisedButton(
                        elevation: 1,
                        color: Color(0xFF69C86C),
                        child: Text(
                          "Name",
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {},
                      ),
                    ),
                  )
                ],
              ),

字符串

相关问题