遮盖住所有导航栏的最佳方法是什么

Question

我使用Flutter创建了这个UI，但我认为这不是最好的方法， 我想问一下蓝色容器的动画，并在滚动时像导航栏一样将两个图标显示为前导和尾随

这是我的代码：

width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    fSectionHeight = 0.35*height;
    return CupertinoPageScaffold(
      backgroundColor: CupertinoColors.white,
      child: SingleChildScrollView(
        child: SafeArea(
          top: false,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                  padding: EdgeInsets.only(top: 50,bottom: 20,left: 20,right: 20),
                  margin: EdgeInsets.only(bottom: 20),
                  color: Color(0xFF2FBFFF),
                  height: fSectionHeight,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      GestureDetector(
                        onTap: (){  },
                        child: Icon(CupertinoIcons.back,color: CupertinoColors.white,size: 28),
                      ),
                      GestureDetector(
                          onTap: (){ print("camera cliked"); },
                          child: Container(
                            child: Align(
                              alignment: Alignment.centerRight,
                              child: Icon(CupertinoIcons.photo_camera_solid,color: CupertinoColors.white,size: 44),
                            ),
                            width: width,
                          )
                      ),
                    ],
                  )
              ),
              Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(left: 20,right:20),
                    child: Column(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Align(
                                alignment: Alignment.centerLeft,
                                child: Text("Titre de l'article",style: Styles.formFieldTitle)
                            ),......................
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        )
      )
    );

Answer 1

您可以根据需要使用SliverAppBar为AppBar设置动画。