Grid 클래스를 사용하여, Component 배치하기

 

---

< 참고 자료 >

Grid Class Reference

---

설명

setBound 로 각 컴포넌트를 배치하는것은 매우 괴로운일일것이다.

CSS 의 Grid 와 매우 비슷하게 동작하는 Grid 클래스를 사용하면 

각 컴포넌트를 비율로 배치할수있다.

 

한가지 기억해야할 중요한것은

setBound 든 Grid 든 컴포넌트의 크기에 대한 모든것은,

resized() 안에서 정의되어야한다.

---

resized() 코드 

void resized() override {
    
    juce::Grid grid;

    using Track = juce::Grid::TrackInfo;
    using Fr    = juce::Grid::Fr;

    grid.templateRows    = { Track (Fr (1)) };
    grid.templateColumns = { Track (Fr (1)), Track (Fr (2)), Track (Fr (1)) };

    grid.items = { juce::GridItem (left), juce::GridItem (center), juce::GridItem (right) };

    grid.performLayout (getLocalBounds());
    
}

---

 

전체코드

class Canvas : public juce::Component {

    public :
        
        Canvas() {
        
            setSize (canvasW, canvasH); // 부모 클래스에서 getWidth(), getHeight() 로 가져올수있음.
            
            addAndMakeVisible(left);
            addAndMakeVisible(center);
            addAndMakeVisible(right);
            
        }

        void resized() override {
            
            juce::Grid grid;
 
            using Track = juce::Grid::TrackInfo;
            using Fr = juce::Grid::Fr;
     
            grid.templateRows    = { Track (Fr (1)) };
            grid.templateColumns = { Track (Fr (1)), Track (Fr (2)), Track (Fr (1)) };
     
            grid.items = { juce::GridItem (left), juce::GridItem (center), juce::GridItem (right) };
     
            grid.performLayout (getLocalBounds());
            
        }

    private :
        
        const int canvasW {1000};
        const int canvasH {1000};
      
        Panel left      {juce::Colours::red};
        Panel center    {juce::Colours::green};
        Panel right     {juce::Colours::blue};

        JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (Canvas)
    
};

---

출력