使用Stack widget-Flutter时，Column widget无法正确定位widget

Question

第一张图片是 Figma 的应用程序设计。虽然下一张图片是我使用简单的

stack

和

columns

得到的图像。我无法理解为什么会这样。

Text

小部件必须位于图片下方，但它们位于屏幕的正下方。谁能帮我解决这个问题吗？

我的代码：

import 'package:flutter/material.dart';

import '../../app_theme.dart';

class ProfileScreen extends StatefulWidget {
  const ProfileScreen({Key? key}) : super(key: key);

  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: AppTheme.lightBlue,
        title: Text(
          'Profile',
          style: TextStyle(color: AppTheme.black100),
        ),
        elevation: 0,
      ),
      body: Column(
        children: [
          SizedBox(
            height: 50,
          ),
          Stack(
            alignment: Alignment.center,
            clipBehavior: Clip.none,
            children: [
              Container(
                width: double.infinity,
                height: 150,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(16),
                      topLeft: Radius.circular(16),
                    ),
                    color: AppTheme.lightGrey),
              ),
              Positioned(
                top: -50,
                child: _buildProfileDetails(),
              ),
            ],
          )
        ],
      ),
      backgroundColor: AppTheme.lightBlue,
      drawer: Drawer(),
    );
  }

  Widget _buildProfileDetails() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Stack(
          clipBehavior: Clip.none,
          children: [
            CircleAvatar(
              radius: 50,
              backgroundImage: AssetImage('assets/images/profile_photo.jpg'),
            ),
            Positioned(
              left: 78,
              top: 60,
              child: CircleAvatar(
                radius: 14,
                backgroundColor: AppTheme.blue,
                child: Icon(Icons.camera_alt_outlined),
              ),
            ),
          ],
        ),
        Text(
          'Alexis Sanchez',
          style: TextStyle(
            color: AppTheme.black100,
            fontSize: 22,
            fontWeight: FontWeight.w600,
            fontStyle: FontStyle.normal,
            fontFamily: 'Poppins',
            height: 33,
          ),
          textAlign: TextAlign.center,
        ),
        Text(
          'Alexis Sanchez',
          style: TextStyle(
            color: AppTheme.black80,
            fontSize: 12,
            fontWeight: FontWeight.w400,
            fontStyle: FontStyle.normal,
            fontFamily: 'Poppins',
            height: 18,
          ),
          textAlign: TextAlign.center,
        ),
        Text(
          'Alexis Sanchez',
          style: TextStyle(
            color: AppTheme.black80,
            fontSize: 12,
            fontWeight: FontWeight.w400,
            fontStyle: FontStyle.normal,
            fontFamily: 'Poppins',
            height: 18,
          ),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

Answer 1

Stack

小部件扩展并填充所有可用空间。如果您希望堆栈小于所有可用空间。将其包装在

SizedBox

小部件内。

Answer 2

如果您需要控制高度，请按

 height: 1.2

操作。并在

mainAxisSize: MainAxisSize.min,

上使用

Column

。

我正在使用不同的方法来实现这一点，并将包含一些额外的小部件以供将来使用。主要在代码注释中描述。如果您在缩放/增加尺寸时遇到任何问题，请调整父级

Container

尺寸。使用演示颜色用于设计目的。

在 dartPad 上运行。

结果将是：

body: LayoutBuilder(
  builder: (context, constraints) {
    return Column(
      children: [
        /// header Part: Name, logo, info
        Container(
          color: Colors.grey,
          height: kToolbarHeight * 3, //adjust  box Stack size
          child: Stack(
            children: [
              /// bottom Half background
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: kToolbarHeight * 2,
                  decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(16),
                      topLeft: Radius.circular(16),
                    ),
                  ),
                ),
              ),

              /// center logo with info
              Positioned(
                bottom: 10,
                left: 0,
                right: 0,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    SizedBox(
                      height: 50 * 2, // from your logo radius
                      width: 50 * 2 +
                          7, //7 is from `camera_alt_outlined` to align
                      child: Stack(
                        children: const [
                          CircleAvatar(
                            radius: 50,
                            backgroundColor: Colors.deepPurple,
                            // backgroundImage: AssetImage(
                            //     'assets/images/profile_photo.jpg'),
                          ),
                          Positioned(
                            bottom: 7,
                            right: 0,
                            child: CircleAvatar(
                              radius: 14,
                              backgroundColor: Colors.blue,
                              child: Icon(Icons.camera_alt_outlined),
                            ),
                          )
                        ],
                      ),
                    ),

                    ///now rest of Text
                    const Text(
                      'Alexis Sanchez',
                      style: TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.w600,
                          fontStyle: FontStyle.normal,
                          fontFamily: 'Poppins',
                          height: 1.2),
                      textAlign: TextAlign.center,
                    ),
                    const Text(
                      'Alexis Sanchez',
                      style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w400,
                        fontStyle: FontStyle.normal,
                        fontFamily: 'Poppins',
                      ),
                      textAlign: TextAlign.center,
                    ),
                    const Text(
                      'Alexis Sanchez',
                      style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w400,
                        fontStyle: FontStyle.normal,
                        fontFamily: 'Poppins',
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),
            ],
          ),
        )
      ],
    );
  },
));

Answer 3

我会把孩子放在这个容器中，并将我想要的所有东西放在这个背景上 必须使用 screenutil 帮助不同的屏幕尺寸

Container(
                width: double.infinity,
                height: 150,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(16.sp),
                      topLeft: Radius.circular(16.sp),
                    ),
                    color: AppTheme.lightGrey),
              ),