如何使用Rikulo錨佈局來改變TextBox視圖的寬度

我是Dart和Rikulo的新手。如何使用Rikulo錨佈局來改變TextBox視圖的寬度

class NameView extends Section 
{ 
    View parentVu; 

    // the inputs 
    DropDownList titleDdl, suffixDdl; 
    TextBox firstNameTBox, middleNameTBox, lastNameTBox; 

    // the labels 
    TextView titleLbl, firstNameLbl, middleNameLbl, lastNameLbl, suffixLbl; 

    List<String> titles = [ 'Dr', 'Hon', 'Miss', 'Mr', 'Mrs', 'Prof', 'Sir' ]; 
    List<String> suffixes = ['I', 'II', 'III', 'IV', 'Junior', 'Senior']; 

    NameView() 
    { 
    parentVu = new View() 
    ..style.background = 'cyan' 
    ..addToDocument(); 

    titleLbl = new TextView('Title'); 
    parentVu.addChild(titleLbl); 

    titleDdl = new DropDownList(model : new DefaultListModel(titles)) 
     ..profile.anchorView = titleLbl 
     ..profile.location = 'east center'; 
    parentVu.addChild(titleDdl); 

    firstNameLbl = new TextView('First') 
     ..profile.anchorView = titleDdl 
     ..profile.location = 'east center'; 
    parentVu.addChild(firstNameLbl); 

    firstNameTBox = new TextBox(null, 'text') 
     ..profile.anchorView = firstNameLbl 
     ..profile.location = 'east center'; 
     //..profile.width = 'flex'; 
    parentVu.addChild(firstNameTBox); 
}

該程序呈現。但是，它不使用瀏覽器的整個寬度（FireFox）。我已經嘗試過TextBoxes profile.width ='flex'

但它不起作用。

任何幫助表示讚賞。

來源

2013-04-28 st.clair.clarke

Firefox？你有沒有用Dartium測試它？請注意，您必須先將它編譯爲JS，然後才能使用Dartium以外的瀏覽器對其進行測試。

順便說一句，從你的實現中，NameView似乎根本與parentVu無關。如果它只是一個控制器，它不需要從Section中擴展（即，它不一定是視圖）。

來源

2013-04-28 05:55:14

你好tomyeh見，感謝您的答覆。該應用程序在Dartium中執行，不是Firefox。我如何將ParentVu與NameView聯繫起來。我試圖使用this.addChild（view），但它不起作用。 NameView是一個視圖。我擴展了部分以獲得空間的好處。請重構我的示例以反映您認爲需要的更改。謝謝 – 2013-04-28 11:52:15

這取決於。如果NameView是父對象，則只需調用this.addChild（parentVu）（並且不應調用parentVU.addToDocument，因爲它不再是根視圖）。然後，NameView只是一個普通的視圖。請參考[這裏]（http://docs.rikulo.org/ui/latest/View_Development/Build_with_Composite_of_Views.html） – 2013-04-29 01:21:20

你好湯姆，我管理你的答案中提到的協會。如果我使用線性佈局，一切都很完美，TextBox的大小隨瀏覽器的大小而變化。我希望這樣做與錨佈局的實驗相同，因爲它似乎更廣泛適用。在我的問題的上述代碼中，TextBox採用其錨定佈局被使用的默認大小。如果我取消註釋將寬度佈局設置爲flex的行，則TextBox的大小會顯着減小，並且我無法根據瀏覽器的大小來調整它。任何幫助表示讚賞。謝謝 – 2013-04-29 02:52:39

如果視圖被錨定到另一個視圖，則位置和大小將取決於它錨定的視圖。在你的情況下，如果指定flex到TextBox，它的寬度將與FirstNameLb1相同。這就是爲什麼它如此之小。

你可以聽佈局事件，如：

firstNameTBox.on.layout.listen((_) { 
    firstNameTBox.width = parentVu.width; 
});

注意：您需要做一些計算來得到正確的寬度。

也Layout Overview

來源

2013-04-29 11:36:42

感謝您的幫助。是否有計劃刪除您建議的UI以根據需要呈現的自定義計算？我使用了一些Drag-n-Drop UI生成器，例如Google的WindowBuilder pro，我根本不需要做任何計算。我知道Dart/Rikulo是新想法，但它的易用性會讓他們經受住時間的考驗。也許Rikulo的錨算法應該重新審視。例如，對於上面所說的，如果B被錨定到A，則B使用'flex'反映A的大小。我認爲這些屬性應該分解。只有錨點應該是相關的 - 不是尺寸 – 2013-04-29 19:23:40

目前Rikulo UI提供了線性佈局和自由佈局（即佈局佈局）。它絕對不包括一切。你可以開發你自己的佈局。請參閱[這裏]（http://docs.rikulo.org/ui/latest/Layouts/Fundamentals/Layout_Lifecycle_and_Customization.html）和源代碼。 – 2013-04-30 01:09:06

在答案＃2中的回覆示例中，我將如何處理parentVu.width應該隨瀏覽器寬度的大小而變化，即「flex」就像它的行爲 – 2013-05-01 11:34:50

如何使用Rikulo錨佈局來改變TextBox視圖的寬度

回答

相關問題