Widziałem, że nie mogę ustawić szerokości a RaisedButton
we Flutter. Jeśli dobrze zrozumiałem, powinienem umieścić RaisedButton
w 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 SizedBox
wokół 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,
),
),
flutter
flutter-layout
OlivierGrenoble
źródło
źródło
Odpowiedzi:
Jak wspomniano w dokumentacji tutaj
Możesz to zrobić w ten sposób
ButtonTheme( minWidth: 200.0, height: 100.0, child: RaisedButton( onPressed: () {}, child: Text("test"), ), );
źródło
width:MediaQuery.of(context).size.width
lubwidth:double.infinity
Dla
match_parent
moż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(...) )
źródło
Container
zamiastSizedBox
To dlatego, że trzepotanie nie dotyczy rozmiaru. Chodzi o ograniczenia.
Zwykle mamy 2 przypadki użycia:
Padding
, który usuwa ograniczenie dziecka i je zwiększa.SizedBox
, ale takżeColumn
w trybie strech, ...RaisedButton
jest 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.źródło
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, )
źródło
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, ), ),),])
źródło
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), ), ), )
źródło
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ódło
width * 0.8
Po prostu użyj
FractionallySizedBox
, gdziewidthFactor
iheightFactor
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, )),
źródło
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
SizeBox
również do .źródło
Jeśli chcesz globalnie zmienić wysokość i minWidth wszystkich swoich
RaisedButton
s, możesz nadpisaćThemeData
wewnątrzMaterialApp
:@override Widget build(BuildContext context) { return MaterialApp( ... theme: ThemeData( ... buttonTheme: ButtonThemeData( height: 46, minWidth: 100, ), )); }
źródło
Zawiń RaisedButton w Container i nadaj szerokość Container Widget.
na przykład
Container( width : 200, child : RaisedButton( child :YourWidget , onPressed(){} ), )
źródło
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),
źródło
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,), ), ) )
źródło
Jeśli przycisk jest umieszczony w
Flex
widgecie (w tymRow
&Column
), możesz go zawinąć za pomocą rozszerzonego widżetu, aby wypełnić dostępne miejsce.źródło
Expanded
ma być używany w widżetach dla wielu dzieci, takich jakRow
iColumn
.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"), ), ),
źródło
Wypróbuj to
Expanded( child: RaisedButton( onPressed: _onButtonPressed, child: Text('Button1') ) )
źródło
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"), ), );
źródło
Jeśli masz przycisk wewnątrz kolumny () i chcesz, aby przycisk miał maksymalną szerokość, ustaw:
w widżecie kolumny. Teraz wszystko pod tą kolumną () będzie miało maksymalną dostępną szerokość
źródło
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: () {}, ), ), ),
źródło
Krótkie i przyjemne rozwiązanie dla przycisku o pełnej szerokości:
źródło
double.infinity
wSizedBox
? To będzie znacznie „krótsze” i „słodsze”.SizedBox.expand()
Przyjrzawszy się temu stwierdziłem, co prawdopodobnie byłoby lepsze niż użycie double.infinity.SizedBox.expand
jest zasadniczoSizedBox
zwidth
iheight
ustawionydouble.infinity
. Więc nawetSizedBox.expand
nie odpowiesz na pytanie OP, które dotyczy,width
a które niewidth + height
.