堆叠中是否有屏幕问题

Question

我的问题是因为I have a image at the top of the screen and under the image is the rest of body scaffold, but that has a rounded corners

我使用了位于appbar下方且处于透明状态的appbar的Stack，但是我无法使用此stack进行容器的圆角操作，这就是我正在做的

Scaffold(
    body: Stack(
        children: <Widget>[
            SingleChildScrollView(
                child: ...
            )
            Positioned(
                top: 0.0,
                left: 0.0,
                right: 0.0,
                child: AppBar(
                    ...
                ),
            ),
        ],
    ),
)

尝试了此之后，我无法对此容器进行圆角处理并且I got this

Answer 1

您可以使用堆栈和位置小部件来实现。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyHomePage(),
    ));

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final upperbodypartheight = 230;
  final double rounded = 30;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/crown.png"),
              fit: BoxFit.cover,
            ),
          ),
          height: 230,
          child: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
            title: Text("title"),
          ),
        ),
        Positioned(
          bottom: 0,
          child: Container(
            height: MediaQuery.of(context).size.height -
                upperbodypartheight +
                rounded,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                color: Colors.amber,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(rounded),
                    topRight: Radius.circular(rounded))),
          ),
        ),
      ],
    );
  }
}