一緒に創造し、一緒に成長しましょう！「ナゲッツデイリー新企画・8月アップデートチャレンジ」に参加して23日目です。クリックするとイベントの詳細がご覧いただけます。
プロジェクトの背景
前の章では、Nuggets クライアントが記事を公開する場合、エントリをそこに配置する必要があることを説明しました。
入り口が決まった後、現在ナゲッツはWeb端リリース文章と沸点モバイル端末をサポートしていますが、モバイル端末もこの2つの機能を1つの入り口として統合するものと予想されます。
さらに詳しく見てみましょう。「发布」関数エントリをクリックしたとき、クライアントはどのように対話すべきでしょうか? したがって、この章では、この対話型ページを完成させます。
プロジェクトのビルド
SwiftUIまず、という名前の新しいプロジェクトを作成しますPublishingView。
トップナビゲーション
「公開」機能へのエントリは、ページの右上隅であるトップナビゲーションの右側にあると暫定的に決定します。現在の Nuggets クライアントのレイアウトに基づいて、デザイン ドラフトの例であるトップ ナビゲーション全体を構築します。
構造を分析してみましょう。上部のナビゲーションは、「Live」ボタンエントリ、「Search Bar」、および「Publish」機能ボタンで構成されています。
「検索バー」を構築するには、变量入力コンテンツをバインドして保存するための検索バーを宣言する必要があります。また、「公開」ボタンをクリックしてポップアップ ウィンドウ ページを開くときに、变量開いた状態を保存するための検索バーも必要です。 、 例えば：
@State var searchText = “"
@State var showMaskView: Bool = false
复制代码次に、トップ ナビゲーション全体のスタイルを完成させましょう。例:
// 搜索栏
func topBarMenu() -> some View {
HStack(spacing: 15) {
// 直播
Button(action: {
}) {
Image(systemName: "video.square")
.font(.system(size: 24))
.foregroundColor(.gray)
}
TextField("搜索文如秋雨", text: $searchText)
.padding(7)
.padding(.horizontal, 25)
.background(Color(.systemGray6))
.cornerRadius(8)
.overlay(
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).padding(.leading, 8)
)
// 新建发布
Button(action: {
withAnimation {
self.showMaskView = true
}
}) {
Image(systemName: "plus.circle.fill")
.font(.system(size: 24))
.foregroundColor(.blue)
}
}.padding(.horizontal, 15)
}
复制代码上記のコードでは、新しいビューを構築しますtopBarMenu。
VStack「ライブ」Buttonボタン、検索フィールドのTextField入力、および縦向きビューを使用して「公開」ボタンをレイアウトしましたButton。検索バーの入力ボックスの内容は、TextField宣言した変数にバインドされてsearchTextおり、「公開」ButtonボタンをクリックするとshowMaskView状態が切り替わり、ポップアップウィンドウが開きます。
次に、ContentViewメイン ビューでスタイルを構築します。例:
var body: some View {
VStack {
topBarMenu()
Spacer()
}
}
复制代码背景マスク
「 」ボタンをクリックして发布ポップアップ ウィンドウを開くと、ポップアップ ウィンドウ自体に加えて、ポップアップウィンドウの背後に背景マスクが表示されます。これは個別に構築できます。例：
// MARK: 蒙层
struct MaskView: View {
@Binding var showMaskView: Bool
var body: some View {
VStack {
Spacer()
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(.black)
.edgesIgnoringSafeArea(.all)
.opacity(0.2)
.onTapGesture {
self.showMaskView = false
}
}
}
复制代码上記のコードでは、構造体を使用して背景マスクを抽出しますMaskView。
この構造ではMaskView、双方向バインディングを容易にするために@Bindingこれを使用し、次にedgesIgnoringSafeArea修飾子を使用して全画面ページ (このページの背景色) を構築し透明度为0.2的黑色、背景マスクの設計を完了しました。
インタラクションに関しては、背景マスクをクリックすると、showMaskViewポップアップ ウィンドウを閉じる状態に切り替わります。
メイン ビューで背景マスクContentViewを使用して効果を確認してみましょう。例:MaskView
var body: some View {
ZStack {
VStack {
topBarMenu()
Spacer()
}
if showMaskView {
MaskView(showMaskView: $showMaskView)
}
}
}
复制代码上記のコードでは、状態の値を判断することで背景マスクshowMaskViewの表示を実現しています。「実行」をクリックして次の項目をプレビューします。MaskView
つづく
ポップアップ ウィンドウのスタイルと対話ロジックが複雑なため、プロジェクトは実装のために上部と下部の章に分かれています。前回の記事で、上部のナビゲーションと背景マスクのデザインが完了しました。次の記事では、下部のポップアップ ウィンドウのポップアップ、折りたたみ、ドラッグなどの機能的なインタラクションを実装します。
ぜひ試してみてください。
このコラムがお役に立ちましたら、いいね、コメント、フォローをお願いします〜