我正在尝试实现此目标(Todo 图像),但图像被隐藏了。怎么把它放到上面呢?我认为使用 Stack 会自动将其置于顶部。有没有等效的 z-index ?我还分享了下面的代码
Todo
进行中
Code
Widget build(BuildContext context) {
return new Scaffold(
body: new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(
expandedHeight: 150.0,
flexibleSpace: new FlexibleSpaceBar(
background: new Stack(
alignment: new Alignment(0.0, 2.5),
children: [
new Container(
margin: const EdgeInsets.symmetric(vertical: 40.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("images/Theme-pattern.png"))),
child: new Column(children: <Widget>[
new Text("Title", style: new TextStyle(fontSize: 32.0)),
]),
),
new Container(
decoration: new BoxDecoration(
borderRadius:
new BorderRadius.all(const Radius.circular(120.0)),
color: Colors.white),
width: 100.0,
child: new Image.asset("images/photo.png"),
)
],
),
),
),
],
));
}
你绝对可以使用堆栈。检查下面的代码:
class MyHomePage extends StatelessWidget {
final double topWidgetHeight = 200.0;
final double avatarRadius = 50.0;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
height: topWidgetHeight,
color: Colors.yellow,
),
new Container(
color: Colors.red,
)
],
),
new Positioned(
child: new CircleAvatar(
radius: avatarRadius,
backgroundColor: Colors.green,
),
left: (MediaQuery.of(context).size.width/2) - avatarRadius,
top: topWidgetHeight - avatarRadius,
)
],
),
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)