我有一个RegisterScreen,我有一个图像作为背景,在所述图像上,我想要一个具有玻璃形态效果的容器,但我的自定义GlassMorismContainer小部件不会附加到屏幕底部

class RegisterScreen extends StatelessWidget {
  const RegisterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints.expand(),
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("lib/assets/images/rainforest_Placeholder.jpg"),
              fit: BoxFit.cover)),
      child: Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: GlassmorphismContainer(
                width: MediaQuery.of(context).size.width, height: 350),
          ),
        ],
      ),
    );
  }
}
class GlassmorphismContainer extends StatelessWidget {
  final double width;
  final double height;
  final Widget? child;

  const GlassmorphismContainer(
      {super.key, required this.width, required this.height, this.child});

  @override
  Widget build(BuildContext context) {
    if (child == null) {
      return Stack(
        children: <Widget>[
          ConstrainedBox(
            constraints: const BoxConstraints.expand(),
          ),
          Center(
            child: ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: Container(
                  width: width,
                  height: height,
                  decoration: BoxDecoration(
                      color: Colors.grey.shade600.withOpacity(0.5)),
                ),
              ),
            ),
          ),
        ],
      );
    }
    return Stack(
      children: <Widget>[
        ConstrainedBox(
          constraints: const BoxConstraints.expand(),
        ),
        Center(
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
              child: Container(
                width: width,
                height: height,
                decoration:
                    BoxDecoration(color: Colors.grey.shade600.withOpacity(0.5)),
                child: child,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

我已经try 过使用Column和MainAxisAlignment.end以及上面的方法和Stack和Align

推荐答案

如果我不理解错误,要实现这样的行为,您可以将Column和mainAxisAlignment.spaceBetweet与SizedBox一起使用:

class RegisterScreen extends StatelessWidget {
  const RegisterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints.expand(),
      decoration: const BoxDecoration(
          image: DecorationImage(
              image: AssetImage("lib/assets/images/rainforest_Placeholder.jpg"),
              fit: BoxFit.cover)),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(
            height: 10,
          ),
          GlassmorphismContainer(
              width: MediaQuery.of(context).size.width, height: 350),
        ],
      ),
    );
  }
}

同样在您的定制GlassMorism类中,ConstrainedBox抛出一个错误.应该关心并可能考虑使用另一个窗口小部件.

Flutter相关问答推荐

在fltter_widget_from_html中启动url

Riverpod状态管理-在调用请求时更新用户界面

设置Flutter 中的ListView.Builder()的最小高度

确保通过在CheckIfFavoriteMovieEvent((event,emit){...})上注册处理程序误差

火焰Flutter 在多个向量之间插补2

尽管 onCollision 处理了我的角色还是从平台上掉了下来

谷歌 map 在 flutter 应用程序中显示错误的当前位置

如何在 VS Code 中启用 Flutter 运行/调试工具栏?

Flutter:如何设置 PersistentFooterButtons 背景?

以编程方式在 flutter 中安装 apk 时解析错误

Firebase Auth - 有没有办法为新用户预先生成 UID?

Flutter 自定义对齐

在 flutter 中获取最喜欢的文档

小部件堆栈未显示顶层

无法使用 bloc 更新 ListView.builder 的特定时间

Flutter/Riverpod 创建复杂对象的副本,其值在某处发生变化

如何对齐卡片小部件中的图标按钮?

Banner Ad.test 广告单元 ID 是否已过时?

try 为两个下拉值添加共享首选项,但在 Flutter 上显示错误断言失败:?

单击列表视图导航到 Flutter 中的另一个页面