在 Flutter 中的应用栏标题上方添加图像横幅

Question

我需要在 Flutter 的应用栏顶部添加一张图片。图片下方是标题和操作图标。我该如何实现？

Answer 1

您可以使用 CustomScrollView 然后您可以找到 SliverAppBar>bottom

更新结果

更新小部件

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 300,
              floating: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                    color: Colors.cyanAccent,
                    child: Image.asset(
                      "assets/ocean.jpg",
                      fit: BoxFit.cover,
                    )),
              ),
            ),
            SliverToBoxAdapter(
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SizedBox(),
                    Text("Title"),
                    Row(
                      children: [
                        IconButton(
                          onPressed: () {
                            print("tapped");
                          },
                          icon: Icon(Icons.ac_unit),
                        )
                      ],
                    )
                  ],
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Container(
                    height: 722,
                    color: Colors.pinkAccent,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}