Flutter 如何像固定一样将对象固定到 topRight？

Question

我在右上角有一个关闭按钮。但是当我向下滚动时，它当然也会滚动。但我希望它始终坚持到顶角，即使我向下滚动也是如此。我该怎么做？

我的代码：

Container(
                        height: MediaQuery.of(context).size.height * 0.95,
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(12),
                            topRight: Radius.circular(12),
                          ),
                        ),
                        child: SingleChildScrollView(
                          physics: const BouncingScrollPhysics(),
                          child: Column(
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              _buildCloseButton(context),
                              SizedBox(
                                width: MediaQuery.of(context).size.width,
                                child: Column(
                                  mainAxisSize: MainAxisSize.max,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    CircleAvatar(
                                      radius: 48,
                                      backgroundImage: NetworkImage(therapist.image ?? ""),
                                    )....,

_buildCloseButton

Padding _buildCloseButton(context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            style: ButtonStyle(
              shape: MaterialStateProperty.all<CircleBorder>(
                const CircleBorder(side: BorderSide(color: Colors.white)),
              ),
              backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
            ),
            child: const Icon(Icons.close, color: Color.fromARGB(255, 48, 58, 87)),
          ),
        ],
      ),
    );
  }

我试着用图片让它更清晰。但您可以随时提出问题。我也尝试过使用 Positioned 小部件，但它 too.Its 没有粘在右上角。

Answer 1

使用 Stack 小部件并使用 Positioned 小部件放置您的按钮，如下所示：

Container(
  height: MediaQuery.of(context).size.height * 0.95,
  decoration: const BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(12),
      topRight: Radius.circular(12),
    ),
  ),
  child: SingleChildScrollView(
    physics: const BouncingScrollPhysics(),
    child: Stack(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 48,
                // backgroundImage: NetworkImage(therapist.image ?? ""),
              )
            ],
          ),
        ),
        // your close button
        Positioned(
          right: 10,
          top: 10,
          child: ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            style: ButtonStyle(
              shape: MaterialStateProperty.all<CircleBorder>(
                const CircleBorder(side: BorderSide(color: Colors.white)),
              ),
              backgroundColor:
                  MaterialStateProperty.all<Color>(Colors.white),
            ),
            child: const Icon(Icons.close,
                color: Color.fromARGB(255, 48, 58, 87)),
          ),
        )
      ],
    ),
  ),
)

Flutter 如何像固定一样将对象固定到 topRight？

Flutter How can i pin object to topRight like a fixed?

mobile

android

ios

dart

flutter