如何使用Rikulo Anchor Layout改變TextBox視圖的寬度

Question

我是Dart和Rikulo的新手。

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'

但它不起作用。

任何幫助表示贊賞。

Answer 1

火狐瀏覽器？ 您是否使用Dartium進行了測試？ 請注意，必須先將其編譯為JS，然后才能使用Dartium以外的瀏覽器進行測試。

順便說一句，從您的實現來看，NameView似乎根本與parentVu不相關。 如果它只是一個控制器，則不需要從Section擴展（即，它不必是視圖）。

Answer 2

如果一個視圖錨定到另一個視圖，則位置和大小均取決於其錨定的視圖。 在您的情況下，如果將flex指定為TextBox，則其寬度將與FirstNameLb1相同。 這就是為什么它這么小。

您可以聽布局事件，例如：

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

注意：您需要進行一些計算以獲得正確的寬度。

另請參閱布局概述