Плавающий элемент в макете на основе Flex

Question

Плавающий элемент в макете на основе Flex

Похоже, вы пытаетесь ввести TextField в статическое поле. Что-то вроде

@FXML
private static TextField myTextField ;

Это, по-видимому, работало в JavaFX 2.2. Он не работает в JavaFX 8. Поскольку ни одна официальная документация никогда не поддерживала это использование, это на самом деле не нарушает обратную совместимость, хотя, с полным основанием, документация о том, что делает FXMLLoader, довольно горькая.

На самом деле не имеет смысла делать статические поля @FXML -injected. Когда вы загружаете файл FXML, он создает новые объекты для каждого из элементов в файле FXML. Новый экземпляр контроллера связан с каждым вызовом FXMLLoader.load(...), а поля в экземпляре этого контроллера вводятся соответствующими объектами, созданными для элементов FXML. Таким образом, введенные поля обязательно специфичны для экземпляра контроллера. Если у вас были статические введенные поля в контроллере, и вы дважды загрузили один и тот же файл FXML и дважды отображали его в пользовательском интерфейсе, тогда у вас не было бы способа ссылаться на оба набора элементов управления.

Обновление: ответ на вопрос в комментариях

В частности, не используйте статические поля, чтобы они могли быть доступны извне класса. Статическое поле имеет одно значение, принадлежащее классу, вместо значения для каждого экземпляра класса, и решение о создании полей static должно выполняться только в том случае, если это имеет смысл. Другими словами, static определяет область scope , а не доступность . Чтобы разрешить доступ к данным экземпляра, вам просто нужно иметь ссылку на экземпляр. FXMLLoader имеет метод getController(), который позволяет вам получить ссылку на контроллер.

Связанная точка: также не рекомендуется отображать элементы управления пользовательского интерфейса от контроллера. Вместо этого вы должны предоставить данные. Например, вместо определения метода getTextField() в контроллере вместо этого определите метод textProperty(), который возвращает StringProperty, представляющий содержимое TextField. Причина этого в том, что, когда ваш босс приходит в офис и говорит вам, что он хочет заменить TextField на TextArea или ComboBox или на какой-то другой элемент управления, тогда это будет намного сложнее если классы вне контроллера используют ваш TextField. Структура данных, представленных вашим контроллером, гораздо реже изменяется, чем реализация того, как эти данные представляются пользователю.

Для некоторых примеров

1

css flexbox css3

задан Vickel 16 January 2019 в 19:02

3 ответа

Другие вопросы по тегам:

css flexbox css3

Похожие вопросы:

score 0 · Answer 1

Я сделал с order

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 300px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}

.bigbox {
  width: 200px;
  background: red;
  order:1;
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
  order:3;
  
}

.smallbox2 {
  background: orange;  
  order:2;
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>

score 0 · Answer 2

Я бы предложил использовать css-grid поверх flexbox, поскольку мы говорим о 2-мерном макете (flexbox отлично подходит для 1-мерных макетов).

вам нужно всего лишь изменить / добавить 3 строки в вашем коде:

оболочке нужно display:grid и бигбоксу нужны grid-column: 1 и grid-row: 1 / 3

Я положил несколько дополнительный текст в моем фрагменте, чтобы показать, что это работает в зависимости от содержимого.

проверьте ниже фрагмент

.wrapper {
  max-width: 400px;
  height: 100%;
  width: 400px;
  background: lightgrey;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 100%;
  grid-auto-flow: column;
}

.bigbox {
  width: 200px;
  background: red;
  grid-column: 1;
  grid-row: 1 / 3;
}

.smallbox1 {
  height: 200px;
  background: green;
}

.smallbox2 {
  background: orange;
}

<div class="wrapper">
  <div class="bigbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.magna. Nullam sed massa luctus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="smallbox1"></div>
  <div class="smallbox2"></div>
</div>

Я нашел эту css-grid cheat- лист очень полезен,

официальные документы здесь,

поддержка браузера здесь

score 0 · Answer 3

Надеюсь, это то, что вы ищете. Сгруппируйте небольшой блок вместе и установите для него значение flex-diretion: column

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}
.wrapper-2 {
display: flex;
max-width: 300px;
max-height: 400px;
width: 400px;
flex-direction: column;
flex-wrap: wrap;
background: lightgrey;
}
.column{
  display: flex;
  flex-direction: column;
}
.bigbox {
  width: 200px;
  background: red;
  /*height: 100%; If you don't want the big box to take full height with flex wrap*/
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
}

.smallbox2 {
  background: orange;  
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="column">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
  </div>
</div>
<hr/>
<div class="wrapper-2">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
 <div class="smallbox1"></div>
 <div class="smallbox2"></div>
</div>