html 对话框的浮动按钮保持重叠

m1m5dgzv  于 2022-12-09  发布在  其他
关注(0)|答案(2)|浏览(151)

你好,我正在构建一个Maui blazor应用程序,我有一个全页面大小的对话框,其中有一个浮动按钮。当对话框关闭并返回原始页面时,在原始页面上,对话框按钮所在的位置有一个死区(在对话框上,我根据条件更改该按钮的可见性)。我正在为浮动按钮使用以下样式:

.center {
    bottom: 5%;
    z-index: 999;
    cursor: pointer;
    margin: 0;
    position: fixed;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

更新:我改变了浮动按钮的css,现在没有死区,但位置不好。:

.center {
    bottom: 5%;
    cursor: pointer;
    margin: 0;
    left:50%;
}
xxls0lw8

xxls0lw81#

有两种方法可以设置元素是否可见。
一种方法是将visibility设置为hidden,这样HTML元素将隐藏,但保留该元素所在的空间。
另一种方法是将display设置为none。在这种情况下,HTML元素将隐藏,但不保留该元素所在的空间。
因此,您可以尝试使用display并将其值设置为none

uyto3xhc

uyto3xhc2#

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: FabExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FloatingActionButton Sample'),
      ),
      body: const Center(child: Text('Press the button below!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.navigation),
      ),
    );
  }
}

相关问题