Jak ustawić szerokość RaisedButton w Flutter?


126

Widziałem, że nie mogę ustawić szerokości a RaisedButtonwe Flutter. Jeśli dobrze zrozumiałem, powinienem umieścić RaisedButtonw SizedBox. Będę wtedy mógł ustawić szerokość lub wysokość pudełka. Czy to jest poprawne? Czy jest inny sposób, aby to zrobić?

Tworzenie SizedBoxwokół każdego przycisku jest trochę uciążliwe, więc zastanawiam się, dlaczego zdecydowali się to zrobić w ten sposób. Jestem prawie pewien, że mają ku temu dobry powód, ale ja tego nie widzę. Rusztowanie jest dość trudne do odczytania i zbudowania dla początkującego.

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),


3
Pamiętaj, że projekt interfejsu użytkownika ze stałą szerokością może przyprawić Cię o ból głowy, jeśli kiedykolwiek zdecydujesz się udostępnić swoją aplikację (oferować większe rozmiary czcionek) lub wielojęzyczną (niektóre języki są bardziej szczegółowe niż inne).
Ruud Helderman

Odpowiedzi:


240

Jak wspomniano w dokumentacji tutaj

Podniesione przyciski mają minimalny rozmiar 88,0 na 36,0, który można przesłonić przyciskiem ButtonTheme.

Możesz to zrobić w ten sposób

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

8
Czy jest coś takiego jak „match_parent”?
Pawan

2
możesz użyć width:MediaQuery.of(context).size.widthlubwidth:double.infinity
Oush

2
Po prostu zawiń go w rozszerzony widżet
janosch

2
usuwa wszystkie podstawowe wartości buttheme
Murat Özbayraktar

101

Dla match_parentmożna użyć

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

Dla dowolnej wartości, której możesz użyć

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

Ciekawe rozwiązanie. Myślę, że powinniśmy wtedy użyć marginesu, aby zostawić trochę pustej przestrzeni po bokach.
OlivierGrenoble

W takim przypadku powinieneś użyć ContainerzamiastSizedBox
CopsOnRoad

@CopsOnRoad SizedBox tworzy pudełko o stałym rozmiarze. W przeciwieństwie do widżetu Pojemnik, Sized Box nie ma parametrów koloru ani dekoracji. Tak więc, jeśli potrzebujesz tylko ustawić szerokość, w takim przypadku SizedBox jest bardziej przejrzysty. Możesz również sprawdzić tę odpowiedź, aby znaleźć więcej stackoverflow.com/questions/55716322
Hasan El-Hefnawy

1
@ HasanEl-Hefnawy Jestem tego świadomy, dlatego użyłem rozmiaru box. Ale ktoś prosił o marżę, a ja odpowiedziałem mu z rozwiązaniem Container
CopsOnRoad

19

To dlatego, że trzepotanie nie dotyczy rozmiaru. Chodzi o ograniczenia.

Zwykle mamy 2 przypadki użycia:

  • Element potomny widżetu definiuje ograniczenie. Sam rozmiar rodzica jest oparty na tych informacjach. np. Padding, który usuwa ograniczenie dziecka i je zwiększa.
  • Rodzic wymusza ograniczenie wobec swojego dziecka. np .: SizedBox, ale także Columnw trybie strech, ...

RaisedButtonjest pierwszym przypadkiem. Co oznacza, że ​​jest to przycisk, który definiuje własną wysokość / szerokość. Zgodnie z zasadami materiałowymi, podniesiony rozmiar przycisku jest stały.

Nie chcesz takiego zachowania, dlatego możesz użyć widżetu drugiego typu, aby przesłonić ograniczenia przycisku.


W każdym razie, jeśli bardzo tego potrzebujesz, rozważ utworzenie nowego widżetu, który wykona zadanie za Ciebie. Lub użyj MaterialButton, który ma właściwość wysokości.


15

Polecam użycie MaterialButton, niż możesz to zrobić w ten sposób:

new MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

użycie minWidth nie odpowiada w pełni na pytanie o ustawienie szerokości. Pomocne może być tutaj użycie widżetu nadrzędnego Wrap.
AlanKley

Jest to idealne rozwiązanie, aby uzyskać mniejsze guziki, które ciasno owijają etykiety.
hawkbee

6

Musisz użyć rozszerzonego widżetu. Jeśli jednak przycisk znajduje się w kolumnie, rozszerzony widżet wypełnia pozostałą część kolumny. Musisz więc umieścić rozwinięty widżet w wierszu.

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

„The Expanded You” - masz na myśli rozszerzony widżet?
Jasir

Domyślna wartość flex to 1, nie ma potrzeby jej określania.
c49

Rozszerzone prace. dziękuję
Sravan

6

Moim preferowanym sposobem na zrobienie przycisku Podnieś z elementem nadrzędnym jest owinięcie go Kontenerem. poniżej znajduje się przykładowy kod.

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )

5

Ten fragment kodu pomoże ci lepiej rozwiązać problem, ponieważ nie możemy określić szerokości bezpośrednio w RaisedButton, możemy określić szerokość dla jego dziecka

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );

również, jeśli chcesz, aby twój przycisk width * 0.8
Kirill Karmazin

5

Po prostu użyj FractionallySizedBox, gdzie widthFactori heightFactor określ procent rozmiaru aplikacji / rodzica.

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),

4

Użyj zapytania o media, aby mądrze używać szerokości swojego rozwiązania, które będzie działać tak samo na małym i dużym ekranie

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

Możesz zastosować podobne rozwiązanie SizeBoxrównież do .


3

Jeśli chcesz globalnie zmienić wysokość i minWidth wszystkich swoich RaisedButtons, możesz nadpisać ThemeDatawewnątrz MaterialApp:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }

3

Zawiń RaisedButton w Container i nadaj szerokość Container Widget.

na przykład

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )

3

Możesz utworzyć globalną metodę, taką jak przycisk używany w całej aplikacji. Zmieni rozmiar zgodnie z długością tekstu wewnątrz kontenera. Widżet FittedBox służy do dopasowania widżetu do dziecka, które się w nim znajduje.

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

Jeśli chcesz przycisk o określonej szerokości i wysokości, możesz użyć właściwości ograniczenia RawMaterialButton do podania minimalnej maksymalnej szerokości i wysokości przycisku

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),

1

możesz robić to, co mówią w komentarzach lub możesz zaoszczędzić wysiłek i pracować z RawMaterialButton. które mają wszystko i możesz zmienić obramowanie na okrągłe i wiele innych atrybutów. dawny kształt (zwiększ promień, aby uzyskać bardziej okrągły kształt)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

i możesz użyć dowolnego kształtu jako przycisku, używając GestureDetector, który jest widżetem i akceptuje inny widżet w atrybucie potomnym. jak w innym przykładzie tutaj

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)

1

Jeśli przycisk jest umieszczony w Flexwidgecie (w tym Row& Column), możesz go zawinąć za pomocą rozszerzonego widżetu, aby wypełnić dostępne miejsce.


2
Rozszerzony może działać tylko wtedy, gdy Twoi rodzice wspierają Cię w jego posiadaniu.
CopsOnRoad

Expandedma być używany w widżetach dla wielu dzieci, takich jak Rowi Column.
Loolooii,

0

W moim przypadku użyłem marginesu, aby móc zmienić rozmiar:

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),

0

Wypróbuj to

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

0

Jeśli nie chcesz usuwać wszystkich skonfigurowanych motywów przycisków.




ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);


0

Jeśli masz przycisk wewnątrz kolumny () i chcesz, aby przycisk miał maksymalną szerokość, ustaw:

crossAxisAlignment: CrossAxisAlignment.stretch

w widżecie kolumny. Teraz wszystko pod tą kolumną () będzie miało maksymalną dostępną szerokość


-1

To zadziałało dla mnie. Container zapewnia wysokość, a FractionallySizedBox zapewnia szerokość RaisedButton.

Container(
  height: 50.0, //Provides height for the RaisedButton
  child: FractionallySizedBox(
    widthFactor: 0.7, ////Provides 70% width for the RaisedButton
    child: RaisedButton(
      onPressed: () {},
    ),
  ),
),

-2

Krótkie i przyjemne rozwiązanie dla przycisku o pełnej szerokości:

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)

Nie jest ani krótkie, ani słodkie. Po prostu dodajesz nadmiarowe widżety w hierarchii drzewa. Dlaczego nie po prostu użyć double.infinityw SizedBox? To będzie znacznie „krótsze” i „słodsze”.
iDecode

W przykładzie nie zastosowano nadmiarowych widżetów. Jeśli masz na myśli, że możesz osiągnąć ten sam wynik za pomocą różnych widżetów, to powiedziałbym, że jest inaczej. W każdym razie nie wiedziałem, że możemy używać SizedBox bez stałego rozmiaru. SizedBox.expand()Przyjrzawszy się temu stwierdziłem, co prawdopodobnie byłoby lepsze niż użycie double.infinity.
fromvega

SizedBox.expandjest zasadniczo SizedBoxz widthi heightustawiony double.infinity. Więc nawet SizedBox.expandnie odpowiesz na pytanie OP, które dotyczy, widtha które nie width + height.
iDecode

Zresztą tytuł pytania dotyczy ustawienia szerokości przycisku. Myślę, że moja odpowiedź jest pomocna dla innych takich jak ja, którzy przybyli tutaj, szukając sposobu, aby guzik miał pełną szerokość.
fromvega

Twoja odpowiedź dodaje niepotrzebne widżety, aby wykonać prostsze zadanie. Może to negatywnie wpłynąć na wydajność.
iDecode
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.