@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: (){}),
)
],
),
);
}
您可以使用 Stack 小部件。
Stack(
children: [
/*your_widget_1*/,
/*your_widget_2*/,
],
);
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: () {},
),
),
)
],
),
如果您想根据索引仅显示其中一个子项,也可以使用
IndexedStack
。
IndexedStack(
index: 0,
children: [
FooWidget(), // Visible if index = 0
BarWidget(), // Visible if index = 1
],
)
您可以使用 assorted_layout_widgets 并使用
RowSuper
或 ColumnSuper
内部间距 (innerDistance
) 为负值进行叠加
或者
可以使用be_widgets来覆盖小部件作为标签或徽章。 它类似于堆栈,但非常灵活,并且在子小部件上绘制徽章或标签,这有助于忽略覆盖小部件的大小。