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


151

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

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

Ответы:


307

Вы можете добавить TextFieldas a childк a Container, у которого есть свойство BoxDecorationwith border:

введите описание изображения здесь

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"),
)

207

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

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

введите описание изображения здесь

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(),
  );
}

Ширина рамки

введите описание изображения здесь

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

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

Цвет границы

введите описание изображения здесь

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

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

Код

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

Сторона границы

введите описание изображения здесь

У них есть граница

  • слева (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,
      ),
    ),
  );
}

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

введите описание изображения здесь

Они имеют радиусы границы 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очень гибкие. Прочтите шпаргалку Flutter - BoxDecoration, чтобы узнать о многих других идеях.


Кто-нибудь знает, как использовать BorderSide с BorderRadius?
HaSnen Tai

@HaSnenTai Вы нашли какое-нибудь решение? В моем дизайне мне нужно придать нижнюю границу в форме таблетки. Как я могу этого добиться?
Роберт Уильямс,

@RobertWilliams, я бы использовал собственный виджет для рисования.
Сурагч,

@Suragch Виджет - это текст, для которого нужна четкая граница (в форме таблетки). Ширина текстового виджета не фиксирована. Не нужно ли для использования настраиваемого виджета рисования указывать свойства исправления?
Роберт Уильямс,

@RobertWilliams, я точно не знаю, что вы пытаетесь сделать. Я бы открыл новый вопрос с иллюстрацией и объяснением того, что в настоящее время не работает. Не стесняйтесь ссылаться на него здесь.
Сурагч

10

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

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

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


7

Лучший способ - использовать BoxDecoration ()

преимущество

  • Вы можете установить границу виджета
  • Вы можете установить цвет или ширину границы
  • Вы можете установить закругленный угол границы
  • Вы можете добавить Тень виджета

Недостаток

  • BoxDecorationиспользуйте только с Containerвиджетом, поэтому вы хотите обернуть свой виджет вContainer()

пример

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800],// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))]// make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

введите описание изображения здесь


1

Использование BoxDecoration () - лучший способ показать границу.

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

Вы также можете просмотреть полный формат здесь


0

Вы можете использовать Контейнер для размещения своего виджета:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

-1

Используйте емкость с Boxdercoration.

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.