SwiftUIの間隔の問題

クリスデリンジャー

私は誰かが説明できることを望んでいる奇妙な間隔の振る舞いを経験しています。2つのビューがあります。メインビュー(ContentView)には、PlayerToolbarという子ビューが含まれています。望ましい動作は、ContentViewが画面全体を占め、PlayerToolbarが画面の一番下にレンダリングされることです。PlayerToolbarには、画像ボタンとスペーサーが含まれています。私が直面している問題は、ContentViewが画面の一部しか占有せず、PlayerToolbarが画像に示されているように下部に配置されていないことです。

ここに画像の説明を入力してください

これがContentViewのコードです

struct ContentView: View {
    var body: some View {
        VStack{
            Spacer()
            Text("Main Content")
            Spacer()
            PlayerToolBar()
            }.background(Color.blue)
    }
}

そして、これがPlayerToolbarのコードです。

struct PlayerToolBar: View {

    var body: some View {   
        HStack{
            Spacer()
            Button(action: {
                print("backward button pressed")
            }){
                Image(systemName: "gobackward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()

            Button(action: {
                print("play button pressed")
            }){
                Image(systemName: "play.circle").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()

            Button(action: {
                print("go forward button pressed")
            }){
                Image(systemName: "goforward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()

            Button(action: {
                print("jot button pressed")
            }){
                Image(systemName: "pencil.circle").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()
        }.background(Color(UIColor.secondarySystemBackground))
    }
}

PlayerToolbarの最初のスペーサーとボタンの間に1つのテキストオブジェクトを追加すると、画面が期待どおりにレンダリングされることがわかりました。

...
            Spacer()
            Text(" ")
            Button(action: {
                print("backward button pressed")
            }){
                Image(systemName: "gobackward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
...

ここに画像の説明を入力してください

Any idea of why it is behaving the way it is and why a Text makes it act the way I prefer?

kontiki

The problem, I think, is because your PlayerToolbar has no height and it is hard for the layout logic to determine one. Nothing in your PlayerToolbar has an explicit height. Your images are made resizable, but nothing in your views is telling how to resize them.

By adding a Text() view, your images now have some height to match, and so it works as you expect it.

Other solutions to break the ambiguity are (choose any, not all):

  1. Set a frame height to the PlayerToolbar:
    PlayerToolBar().frame(height: 40)
  1. Set the height for at least one of your images:
    Image(systemName: "gobackward.10")
       .renderingMode(.original)
       .resizable()
       .frame(height: 40)
       .aspectRatio(contentMode: .fit)
  1. Set the height to one of your buttons:
    Button(action: {
        print("backward button pressed")
    }){
        Image(systemName: "gobackward.10")
            .renderingMode(.original)
            .resizable()
            .aspectRatio(contentMode: .fit)
   }.frame(height: 40)
  1. Set the height of the HStack in your PlayerToolbar.

  2. Remove the resizable() modifier in at least one of your images.

Image(systemName: "pencil.circle").renderingMode(.original).aspectRatio(contentMode: .fit)

これらの選択肢はすべて同じことを目的としており、画像がどれだけ拡大/縮小するかを確実に把握します。もちろん、他にも多くのオプションがあります。これらはほんの数例です。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

gridlayoutの間隔の問題

分類Dev

間隔の問題CrystalReports 2008

分類Dev

MySQL間隔の問題

分類Dev

基礎間隔の問題

分類Dev

Java出力の不明な間隔の問題

分類Dev

UiCollectionViewの間隔の問題-迅速

分類Dev

ステートメントの印刷、間隔の問題。

分類Dev

Angular6でのCSS間隔の問題

分類Dev

スライディングカードの間隔の問題

分類Dev

get_data_yahoo(pandas_datareader)の1m間隔の問題

分類Dev

バッチでの入力と間隔の問題

分類Dev

Outlook.com(Hotmail)の段落間隔の問題

分類Dev

垂直方向のHTMLボタン間隔の問題

分類Dev

SSRSチャート凡例の奇数間隔の問題

分類Dev

自動レイアウトの問題-垂直方向の間隔

分類Dev

Webパーツのタイル間隔の問題

分類Dev

SwiftUIの要素間の間隔は?

分類Dev

Flutter DropdownButtonFormFieldlabelTextとドロップダウン間隔の問題

分類Dev

Y軸間隔の問題を再グラフ化します

分類Dev

間隔に関するラテックス表の問題

分類Dev

文字間隔の問題、文字間隔を追加しても2つの文字がくっつく

分類Dev

時間の問題

分類Dev

軸とtickValuesの間隔に関する勝利チャートの問題

分類Dev

cssグリッドの垂直方向の間隔に関する問題

分類Dev

networkxグラフのノードの間隔に関する問題

分類Dev

拡張パネルの間隔の問題があるフレックス列

分類Dev

CSS間隔の問題-スペースの原因がわからない

分類Dev

Konsoleターミナルでのフォント間隔の問題

分類Dev

SwiftUI-CNContactViewControllerNavigationBarの問題

Related 関連記事

ホットタグ

アーカイブ