android - 如何让资产超过 AppBar？

Question

我想在 Flutter 中制作这个屏幕：

是否有可能做到这一点 ？我的意思是让蜥蜴图退出AppBar并突出在主屏幕上？

这是资产：

标签： androidflutterflutter-layout

Answer 1

您可以执行以下操作：

class NextPage extends StatefulWidget {

  @override
  _NextPageState createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        extendBodyBehindAppBar: true,
        backgroundColor: Colors.white,
        appBar: PreferredSize(
          preferredSize: Size(MediaQuery.of(context).size.width,200),
          child: Container(
            child: Stack(
              alignment: Alignment.topLeft,
              children: <Widget>[
                Container(color: Colors.red,width: MediaQuery.of(context).size.width,height: 100,),
                Container(width: 100,height: 200,color: Colors.blue,),
              ],
            ),
          ),
        ),
        body: Container(color: Colors.amber,),
      ),
    );
  }
}

1. 我添加了一个 PreferredSize 小部件。它就像一个定义应用栏最大宽度和高度的容器。

2. 我添加了extendBodyBehindAppBar: true属性，以便正文部分将从屏幕顶部开始，而不是从应用栏下方开始。

3. 然后我只是将我的自定义应用栏添加为子属性。

这是上面代码的结果。（红色容器将是您的自定义应用栏，蓝色容器可以替换为您的资产）