如何修復小部件溢出圓角邊框容器 flutter

Question

我有一個 topLeft 邊框為圓形的容器，在它的子項中，我有一個帶有 SingleChildScrollView 的列，其中包含每個全名、移動設備等的小部件。當我向上滾動時，這些子項越過容器並溢出圓形邊框。 我想解決這個問題。 我希望這個 go 在容器后面而不是在它前面。

class SetupAccountScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BaseWidget(
      mainTitle: "Setup Account",
      description:
          "One last step to an awesome shopping experience, we’d like to know you more",
      content: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            FullNameInputWidget(),
            MobileNumberInputWidget(),
            AddressInputWidget(),
          ],
        ),
      ),
    );
  }
}


class BaseWidget extends StatelessWidget {
  final String mainTitle;
  final String description;
  final Widget content;

  BaseWidget({this.mainTitle, this.description, this.content});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(
          "Back",
          style: GoogleFonts.playfairDisplay(fontSize: 15),
        ),
        leading: IconButton(
            icon: Icon(
              Icons.chevron_left,
              size: 40,
            ),
            onPressed: () {}),
        backgroundColor: Colors.transparent,
      ),
      body: Stack(
        children: [
          Positioned(
            bottom: 0,
            child: Container(
                height: MediaQuery.of(context).size.height * 0.7,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius:
                        BorderRadius.only(topLeft: Radius.circular(100))),
                child: content),
          ),
          Positioned.fill(
              child: Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 30.0, vertical: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(mainTitle,
                            style: GoogleFonts.playfairDisplay(
                                color: Colors.white,
                                fontWeight: FontWeight.w400,
                                fontSize: 25)),
                        Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Text(description,
                              style: GoogleFonts.playfairDisplay(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w700,
                                  fontSize: 15)),
                        ),
                      ],
                    ),
                  )))
        ],
      ),
    );
  }
}

Answer 1

不用對容器進行decoration ，而是使用ClipRRect來制作圓角，就像這樣。

Positioned(
        bottom: 0,
        child: ClipRRect(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(100)),
          child: Container(
            height: MediaQuery.of(context).size.height * 0.7,
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            child: content,
          ),
        ),
      ),