Arhn - архитектура программирования

Как отформатировать цвет фона для позиционированного блока текста?

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

желаемый результат

Я могу сделать это, вставив Контейнер в качестве другого расположенного дочернего элемента в этом стеке. Но мне пришлось бы пересчитывать ширину каждый раз при изменении текстовой строки, что неоптимально. Есть ли способ лучше?

один плохой подход

var stack = new Stack(
  children: <Widget>[
    new Image.asset ( // background photo
      "assets/texture.jpg",
      fit: ImageFit.cover,
      height: 600.0,
    ),
    new Positioned ( // headline
      child: new Container(
        decoration: new BoxDecoration (
          backgroundColor: Colors.black
        ),
      ),
      left: 0.0,
      bottom: 108.0,
      width: 490.0,
      height: 80.0,
    ),
    new Positioned (
      child: new Text (
        "Lorem ipsum dolor.",
        style: new TextStyle(
          color: Colors.blue[500],
          fontSize: 42.0,
          fontWeight: FontWeight.w900
        )
      ),
      left: 16.0,
      bottom: 128.0,
    )
  ]
);
flutter dart
11.01.2017

Ответы:


1

Просто вложите элемент Text как дочерний в Контейнер с BoxDecoration (т. Е. Цветом фона); Контейнер растянется, чтобы уместить текст внутри. Кроме того, можно указать заполнение для этого Контейнера, что избавляет от необходимости жестко задавать ширину / высоту поля.

var stack = new Stack(
  children: <Widget>[
    new Image.asset ( // background photo
      "assets/texture.jpg",
      fit: ImageFit.cover,
      height: 600.0,
    ),
    new Positioned ( // headline
      child: new Container(
        child: new Text (
          "Lorem ipsum dolor.",
          style: new TextStyle(
            color: Colors.blue[500],
            fontSize: 42.0,
            fontWeight: FontWeight.w900
          )
        ),
        decoration: new BoxDecoration (
          backgroundColor: Colors.black
        ),
        padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
      ),
      left: 0.0,
      bottom: 108.0,
    ),
  ]
);
11.01.2017

2

Начиная с Flutter 0.10.3 изменилось оформление BoxDecoration. backgroundColor: больше не является допустимым свойством. Теперь цвет :.

05.11.2018
  • color управляет цветом самого текста. Этот вопрос касается установки цвета фона виджета Text. 04.01.2019
  • Джеймс говорил об изменении color Container, а не Text. начиная с Flutter 1.0.0 вы можете сделать это, чтобы изменить цвет фона текста: style: TextStyle(background: Paint()..color = Color(0xFF3b9c00), ),. получил это из этой проблемы с github 22.01.2019
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..