Hình thái: Tự động thay đổi kích thước hộp nhóm chứa trong ngăn cuộn?

Question

Thử nghiệm với mùa hè Pharo 1.4. Tôi nghĩ là tốt hơn để giải thích nó bằng cách sử dụng ảnh chụp màn hình, mã dưới đây.

Đây là trạng thái ban đầu của tôi (những gì tôi nhận được bây giờ với mã của tôi):

Tôi muốn các morph hộp nhóm để được lấp đầy chiều ngang trên khai mạc, như thế này:

Và sau khi thay đổi kích thước, tôi muốn morph hộp nhóm để duy trì giới hạn, ví dụ:

Đây là mã tôi đã cố gắng:

| s morph1 morph2 row groupBox scroller | 
s := ScrollPane new. 
morph1 := BorderedMorph new. 
morph2 := BorderedMorph new. 
row := UITheme builder newRow: {morph1 . morph2}. 
groupBox := UITheme builder newGroupbox: 'Group Box Test' for: row. 
    groupBox 
     layoutFrame: (LayoutFrame fractions: (0 @ 0 corner: 1 @ 0.8)); 
     vResizing: #spaceFill; 
     hResizing: #spaceFill; 
     layoutChanged. 
scroller := s scroller. 
scroller 
    addMorph: (groupBox position: 0@0) 
    fullFrame: (0 @ 0 corner: 0.8@0.5). 
s scroller color: Color white. 
s 
extent: 250@150; 
openCenteredInWorld 

Các thùng chứa phải là một ScrollPane.

Tôi đã thích nghi mã của Bert để không sử dụng Dạng đa UIBuilder, kết quả là:

morph1 := Morph new. 
morph2 := Morph new. 
row := ScrollPane new. 
row 
    color: Color white; borderColor: Color gray; borderWidth: 1; 
    layoutPolicy: ProportionalLayout new. 
row scroller 
    addMorph: morph1 fullFrame: (LayoutFrame fractions: (0@0 corner: 1@0) offsets: (5@5 corner: -60@45)); 
    addMorph: morph2 fullFrame: (LayoutFrame fractions: (1@0 corner: 1@0) offsets: (-50@5 corner: -5@45)). 
row 
    extent: 250@150; 
    openInHand 

nhưng cũng không hiệu quả vì các hình thái màu xanh bên trong được chồng chéo và không làm đầy khung quy định. Tôi đã thử nhiều kết hợp bằng cách sử dụng khung nhưng không có gì làm việc cho đến nay. Bạn có biết tôi đang thiếu gì không?

Answer 1

Sử dụng UIBuilder bạn không cần phải tạo một cuộn giấy thủ công. Kiểm tra tập lệnh sau bằng cách thay đổi kích thước cho đến khi thanh cuộn dọc hoặc ngang xuất hiện tự động.

| dialog morphList row morph1 morph2 morph3 morph4 | 

morph1 := BorderedMorph new hResizing: #spaceFill. 
morph2 := BorderedMorph new. 
morph3 := BorderedMorph new. 
morph4 := BorderedMorph new. 
row := UITheme builder newRow: {morph1 . morph2 . morph3}. 
morphList := UITheme builder 
    newMorphListFor: (ListModel new list: {row . morph4}) 
    list: #list 
    getSelected: #selectionIndex 
    setSelected: #selectionIndex: 
    help: 'This is a morph list'. 
dialog := UITheme builder newWindowFor: nil title: 'titleString'. 
dialog addMorph: morphList fullFrame: (LayoutFrame fractions: (0@0 corner: 1@0.5)). 
dialog openInWorld 

Answer 2

Bạn đang thiếu mà ProportionalLayout không sử dụng #spaceFill vv Vì vậy, một trong hai sử dụng TableLayout:

morph1 := Morph new hResizing: #spaceFill. 
morph2 := Morph new. 
row := Morph new 
    color: Color white; borderColor: Color gray; borderWidth: 1; 
    layoutPolicy: TableLayout new; 
    layoutInset: 5; cellInset: 5; 
    listDirection: #leftToRight; 
    addAllMorphs: {morph1. morph2}; 
    extent: 250@150; 
    openInHand 

hoặc một ProportionalLayout với offsets, đó là làm thế nào bạn có thể kết hợp cố định chiều rộng và kích thước tương đối:

morph1 := Morph new. 
morph2 := Morph new. 
row := Morph new 
    color: Color white; borderColor: Color gray; borderWidth: 1; 
    layoutPolicy: ProportionalLayout new; 
    addMorph: morph1 fullFrame: (LayoutFrame fractions: (0@0 corner: 1@0) offsets: (5@5 corner: -60@45)); 
    addMorph: morph2 fullFrame: (LayoutFrame fractions: (1@0 corner: 1@0) offsets: (-50@5 corner: -5@45)); 
    extent: 250@150; 
    openInHand 

Tôi đã thử điều này trong Squeak không có UITheme, do đó, điều này đang sử dụng Morph trực tiếp.