颤动中的堆栈是否存在屏幕问题答案

【问题标题】：Is there a screen problem with stack in flutter颤动中的堆栈是否存在屏幕问题
【发布时间】：2020-02-14 14:22:07
【问题描述】：

我的问题是因为 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下方的容器，但我不能用这个堆栈做容器的圆角，这就是我正在做的

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

试过这个后，我不能做这个圆角的容器和I got this

【问题讨论】：

可以分享容器代码吗？

标签： flutter dart flutter-layout

【解决方案1】：

您可以使用 Stack 和 Position 小部件来实现。

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))),
          ),
        ),
      ],
    );
  }
}

【讨论】：