Jak dodać obramowanie do widżetu we Flutterze?


190

Używam Fluttera i chciałbym dodać obramowanie do widgetu (w tym przypadku widgetu Tekst).

Próbowałem TextStyle i Text, ale nie widziałem, jak dodać obramowanie.

Odpowiedzi:


371

Możesz dodać TextFieldas a childdo a, Containerktóre ma właściwość BoxDecorationwith border:

wprowadź opis obrazu tutaj

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

245

Oto rozszerzona odpowiedź. A DecoratedBoxjest tym, czego potrzebujesz, aby dodać obramowanie, ale używam go Containerdla wygody dodawania marginesów i dopełnienia.

Oto ogólna konfiguracja.

wprowadź opis obrazu tutaj

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

gdzie BoxDecorationjest

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

Szerokość granicy

wprowadź opis obrazu tutaj

Mają one szerokość obramowania 1, 3oraz 10odpowiednio.

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

Kolor ramki

wprowadź opis obrazu tutaj

Te mają kolor obramowania

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

Kod

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

Strona graniczna

wprowadź opis obrazu tutaj

Te mają stronę graniczną

  • lewy (3,0), górny (3,0)
  • dół (13,0)
  • lewy (niebieski [100], 15,0), górny (niebieski [300], 10,0), prawy (niebieski [500], 5,0), dolny (niebieski [800], 3,0)

Kod

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

Promień graniczny

wprowadź opis obrazu tutaj

Te mają granic promienie 5, 10i 30odpowiednio.

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

Dziać się

DecoratedBox/ BoxDecorationsą bardzo elastyczne. Przeczytaj ściągawkę Flutter - BoxDecoration, aby znaleźć wiele innych pomysłów.


Czy ktoś wie, jak używać BorderSide z BorderRadius?
HaSnen Tai

@HaSnenTai Czy znalazłeś jakieś rozwiązanie? W moim projekcie muszę nadać dolnemu brzegowi kształt przypominający pigułkę. Jak mogę to osiągnąć?
Robert Williams

@RobertWilliams, użyłbym niestandardowego widżetu do rysowania.
Suragch

@Suragch Widżetem jest tekst, który wymaga mocnej (w kształcie pigułki) ramki. Szerokość widżetu tekstowego nie jest ustalona. Czy do korzystania z niestandardowego widżetu rysowania nie będę potrzebować właściwości poprawek?
Robert Williams

@RobertWilliams, nie wiem dokładnie, co próbujesz zrobić. Otworzyłbym nowe pytanie z ilustracją i wyjaśnieniem, co obecnie nie działa. Zapraszam do linku do niego stąd.
Suragch

10

Jak stwierdzono w dokumentacji, flutter przedkłada kompozycję nad parametry. W większości przypadków to, czego szukasz, nie jest właściwością, ale opakowaniem (a czasem kilku pomocników / „konstruktorów”)

W przypadku granic to, czego chcesz DecoratedBox, ma decorationwłaściwość definiującą granice; ale także obrazy tła lub cienie.

Alternatywnie, jak powiedział @Aziza, możesz użyć Container. Który jest połączeniem DecoratedBox, SizedBoxa kilka innych przydatnych widżetów.


9

Najlepszym sposobem jest użycie BoxDecoration ()

Korzyść

  • Możesz ustawić obramowanie widżetu
  • Możesz ustawić kolor lub szerokość obramowania
  • Możesz ustawić zaokrąglony róg obramowania
  • Możesz dodać cień widżetu

Niekorzyść

  • BoxDecorationużywaj tylko z Containerwidżetem, więc chcesz zawinąć swój widżetContainer()

Przykład

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

wprowadź opis obrazu tutaj


3

Używanie BoxDecoration () to najlepszy sposób na pokazanie obramowania.

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

Możesz również wyświetlić pełny format tutaj


3

Możesz użyć kontenera, aby umieścić swój widżet:

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

2

Użyj pojemnika z Boxdercoration.

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.