我的目标是:用户触摸屏幕底部的导航栏(在某些平板电脑上的导航/状态栏)后,我捕获此事件并运行一个方法,在几秒钟后使该栏变暗。
但当我进行互联网研究时,这似乎是不可能的。我尝试解决这个问题,但每个触摸事件仅在栏上方的像素边界内起作用。
所以我的问题是:无法捕获导航/状态栏触摸事件的原因是什么?
所以我试图在 SwiftUI 的详细信息视图中隐藏导航栏。我在技术上通过在不同的视图中使用 init() 使其工作,但问题是它使整个应用程序的导航栏透明,我只希望它在一个视图中。我没有在 DetailsView 中使用 init() 的原因是因为我有一个需要输入的变量,所以我不知道该怎么做!这是初始化程序的代码:
init() {
let navBarAppearance = UINavigationBar.appearance()
navBarAppearance.backgroundColor = .clear
navBarAppearance.barTintColor = .clear
navBarAppearance.tintColor = .black
navBarAppearance.setBackgroundImage(UIImage(), for: .default)
navBarAppearance.shadowImage = UIImage()
}
Run Code Online (Sandbox Code Playgroud)
下面是在 detailsView 中使用 init() 的 Content View 和 Details View 代码的样子:
// 内容视图 //
struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0..<5) { i in
NavigationLink(destination: DetailsView(test: 1)) {
Text("DetailsView \(i)")
}
}
}
.listStyle(InsetGroupedListStyle())
.navigationBarTitle("Test App")
}
}
}
Run Code Online (Sandbox Code Playgroud)
// 详情查看 // …
import SwiftUI
struct SecondView: View {
var ResearchMCQ: Question
//Creating Variables for Revision Topics
@State private var setOptionOne = false
@State private var setOptionTwo = false
@State private var setOptionThree = false
//User Home Page View
var body: some View {
//Allows for Navigation and Scrolling
NavigationView {
ScrollView{
//App Logo and Vertical Stacks
VStack(spacing: 1.0) {
Image("AppLogo")
.resizable()
.scaledToFit()
.padding(.trailing, 50.0)
.frame(height: 100, alignment: .topLeading)
Spacer()
Spacer()
//Multiple Choice Question Appears
Group {
Text(ResearchMCQ.question)
.padding(.trailing, 4)
Spacer()
Spacer()
//Ensures …Run Code Online (Sandbox Code Playgroud) 在我的applicationDidFinishLaunching中,我设置了一个UINavigationController:
- (void)applicationDidFinishLaunching:(UIApplication *)application {
navController = [[UINavigationController alloc] init];
[[navController navigationBar] setFrame:CGRectMake(0.0,0.0,320.0,20.0)];
...
}
Run Code Online (Sandbox Code Playgroud)
如您所见,我正在尝试使导航控制器的高度为20px.但是,这不起作用.我认为setFrame必须是正确的函数,但我没有在正确的位置调用它.我意识到关于SO的其他问题与我的相似,但我认为如果它响应setFrame,设置navigationBar高度应该是正确的......对吗?
还有,谁知道navigationBar的默认高度?
谢谢!
如何摆脱Bootstrap Navbar周围的空白区域?
http://screencast.com/t/1dOukVBLZ
我尝试用0px填充,边距,边框覆盖CSS,我确认Navbar上方和下方的图像中没有空格.
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/navbar.css" rel="stylesheet" type="text/css">
<script src="js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>
<div class="container">
<!-- Header -->
<img src='images/Header.gif' class="img-responsive">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Project name</a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="properties.html">Properties</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> …Run Code Online (Sandbox Code Playgroud) 我知道这已经很多次了,但在我的具体情况下我找不到任何解决方案.我有一个导航栏,整个<li>应该是"可点击的".现在只有(消息/文本)是"可点击的".我使用HTML和CSS.这是代码:
HTML:
<!--mainmenu-->
<ul id="Navigation">
<li><a href="./index.html" title="">Shop</a></li>
<li>About</li>
<li>
Fenster
<ul id="Navigation">
<li> Studio</li>
<li>Home</li>
<li>Ambiente</li>
</ul>
</li>
<li>Küchen</li>
<li>Türen</li>
<li class="menuitem"><a href="./contact.html" title=""><div class="menulink">Contact</div></a></li>
<li>Sale %</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
CSS:
@charset "utf-8";
/* CSS Document */
body {
font-size: 13px;
text-align: center;
}
#Navigation {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#Navigation li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: …Run Code Online (Sandbox Code Playgroud) 我有一个页面的移动版本.内容足以让用户在他的移动设备上滚动.当点击移动导航栏从左侧滑入和图标body得到overflow: hidden;这样的内容已经不滚动.有没有办法使导航栏100%高度的窗口(而不是文档),以便用户可以进一步滚动导航栏?滑入和导航高度由Javascript控制,但我正在寻找CSS解决方案.有人可以帮忙吗?
// CSS
#mobile_nav {
width: 300px;
position: fixed;
top: 0;
left: -300px;
z-index: 10000;
overflow: auto;
}
// JS
jQuery("#mobile_button").on("click", function() {
jQuery("#mobile_nav")
.css({ height: jQuery(window).height() });
.stop(true)
.animate({ left: 0 })
;
jQuery("body").css({ overflow: "hidden" });
});
Run Code Online (Sandbox Code Playgroud) 我的问题是关于使用 flex 的导航栏样式和布局。
我正在尝试创建一个固定的导航栏,其中指向主页的徽标/链接左对齐,其余链接右对齐。我一直在尝试通过 flex 使用 flex-direction:row 和 row-reverse 的 CSS 样式以及 justify-content: flex-start 和 flex-end 来实现这一点,但收效甚微。
如何使用 flex 实现这种外观?
.header {
display: flex;
width: 100vw;
padding: 0;
margin: 0;
}
.fixednav {
display: flex;
flex-direction: row;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 1);
}
.leftnav {
position: absolute;
flex-direction: row;
justify-content: flex-start;
}
.rightnav {
position: absolute;
justify-content: flex-end;
flex-direction: row-reverse;
}Run Code Online (Sandbox Code Playgroud)
<div class="header">
<header>
<div class="navcontainer">
<nav class="fixednav"> …Run Code Online (Sandbox Code Playgroud)如何在Swift中更改大标题导航栏的字体?
我无法找到涵盖实现带有大标题的导航栏的自定义字体的线程。
我正在尝试使用标题为“ ??????????? W8.ttc”的字体。这似乎已预装在我的Mac上。字体书中的名称是:“ Hiragino Kaku Gothic StdN”。
这是我尝试过的:
self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedString.Key.font: UIFont(name: "???????????-W8", size: 20)!]
Run Code Online (Sandbox Code Playgroud)
和
self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedString.Key.font: UIFont(name: "???????????W8", size: 20)!]
Run Code Online (Sandbox Code Playgroud)
和
self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedString.Key.font: UIFont(name: "Hiragino Kaku Gothic StdN", size: 20)!]
Run Code Online (Sandbox Code Playgroud)
字体文件名使用其他语言还是其他问题?
这是SO中经常遇到的问题,但这里几乎有5个线程没有提供任何帮助.下拉菜单项不会保持打开状态,除非我将鼠标悬停在初始项目上多次.我无法在特定的课程中找到问题,任何帮助将不胜感激.这是CSS代码:
nav ul {
list-style: none;
}
nav ul li {
display: block;
float: right;
}
nav ul ul {
display: none;
position: relative;
margin-top: 60px;
}
nav ul li:hover > ul {
display: block;
position: absolute;
margin-left: -30px;
}
nav ul ul li {
width: 170px;
float: none;
display: block;
}
#navigation_bar a {
display: block;
float: right;
padding: 5px;
font-size: 25px;
color: black;
}
#navigation_bar a:hover {
border-radius: 20px;
color: #FFFFFF;
transition: color 0.2s;
}
div nav { …Run Code Online (Sandbox Code Playgroud) 我尝试通过以下代码隐藏NavigationBar:
public static void setFullscreen(final View decorView) {
decorView.setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
@Override
public void onSystemUiVisibilityChange(int visibility) {
if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {
decorView.setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}
});
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
decorView.setSystemUiVisibility(decorView.getSystemUiVisibility());
}
}
Run Code Online (Sandbox Code Playgroud)
并为每个活动:
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (hasFocus) {
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);}
}
Run Code Online (Sandbox Code Playgroud)
和活动主题:
<style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="@style/Theme.AppCompat.Light">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">true</item>
<item …Run Code Online (Sandbox Code Playgroud) navigationbar ×12
css ×5
html ×4
swift ×3
android ×2
swiftui ×2
flexbox ×1
fullscreen ×1
init ×1
iphone ×1
java ×1
javascript ×1
mobile ×1
navigation ×1
statusbar ×1