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堆栈，位于appbar下方的容器，但是我无法使用此堆栈处理容器的圆角，这就是我要做的

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

尝试过此操作后，我无法制作带有圆角和I got this

的容器

Answer 1

您可以使用Stack and 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))),
          ),
        ),
      ],
    );
  }
}

颤振中的堆叠是否存在屏幕问题

1 个答案: