Как добавить границу к виджету во Flutter?

Я использую Flutter, и я хотел бы добавить границу к виджету (в данном случае, к текстовому виджету).

Я пробовал TextStyle и Text, но я не видел, как добавить границу.

ОТВЕТЫ

Ответ 1

Вы можете добавить TextField как child к Container, который имеет свойство BoxDecoration со свойством border:

enter image description here

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

Ответ 2

Вот расширенный ответ. DecoratedBox - это то, что вам нужно, чтобы добавить рамку, но я использую Container для удобства добавления полей и отступов.

Вот общая настройка.

enter image description here

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

где BoxDecoration

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

Ширина рамки

enter image description here

Они имеют ширину границы 1, 3 и 10 соответственно.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

Цвет границы

enter image description here

Они имеют цвет границы

  • Colors.red
  • Colors.blue
  • Colors.green

Код

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

Пограничная сторона

enter image description here

У них есть пограничная сторона

  • левый (3,0), верхний (3,0)
  • низ (13,0)
  • слева (синий [100], 15,0), сверху (синий [300], 10,0), справа (синий [500], 5,0), снизу (синий [800], 3,0)

Код

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

Радиус границы

enter image description here

Они имеют граничные радиусы 5, 10 и 30 соответственно.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

Продолжается

DecoratedBox/ BoxDecoration очень гибкие. Читайте Flatter - Шпаргалку BoxDecoration для многих других идей.

Ответ 3

Как указано в документации, флаттер предпочитает состав по параметрам. В большинстве случаев то, что вы ищете, не является свойством, а вместо этого оболочкой (а иногда и несколькими помощниками/ "строителем" )

Для границ требуется DecoratedBox, у которого есть свойство decoration, которое определяет границы; но и фоновые изображения или тени.

В качестве альтернативы, как @Aziza сказал, вы можете использовать Container. Какая комбинация DecoratedBox, SizedBox и несколько других полезных виджетов.

Ответ 4

Как получить скошенный прямоугольник с границами?