Ich habe gesehen, dass ich die Breite von a RaisedButton
in Flutter nicht einstellen kann . Wenn ich gut verstanden habe, sollte ich das RaisedButton
in eine setzen SizedBox
. Ich kann dann die Breite oder Höhe der Box einstellen. Ist es richtig? Gibt es einen anderen Weg, es zu tun?
Es ist etwas mühsam, SizedBox
um alle Schaltflächen herum eine zu erstellen, daher frage ich mich, warum sie sich dafür entschieden haben, dies auf diese Weise zu tun. Ich bin mir ziemlich sicher, dass sie einen guten Grund dafür haben, aber ich sehe es nicht. Das Gerüst ist für Anfänger ziemlich schwer zu lesen und zu bauen.
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
quelle
quelle
Antworten:
Wie in der Dokumentation hier gesagt
Sie können es so machen
ButtonTheme( minWidth: 200.0, height: 100.0, child: RaisedButton( onPressed: () {}, child: Text("test"), ), );
quelle
width:MediaQuery.of(context).size.width
oderwidth:double.infinity
Für
match_parent
Sie können verwendenSizedBox( width: double.infinity, // match_parent child: RaisedButton(...) )
Für einen bestimmten Wert können Sie verwenden
SizedBox( width: 100, // specific value child: RaisedButton(...) )
quelle
Container
anstelle vonSizedBox
Das liegt daran, dass es beim Flattern nicht um Größe geht. Es geht um Einschränkungen.
Normalerweise haben wir 2 Anwendungsfälle:
Padding
, wodurch die untergeordnete Einschränkung übernommen und erhöht wird.SizedBox
aber auchColumn
im Streckmodus, ...RaisedButton
ist der erste Fall. Das heißt, es ist die Schaltfläche, die ihre eigene Höhe / Breite definiert. Und gemäß den Materialregeln ist die Größe der erhöhten Tasten festgelegt.Sie möchten dieses Verhalten nicht, daher können Sie ein Widget des zweiten Typs verwenden, um die Schaltflächenbeschränkungen zu überschreiben.
Wenn Sie dies häufig benötigen, sollten Sie entweder ein neues Widget erstellen, das die Aufgabe für Sie erledigt. Oder verwenden Sie
MaterialButton
, die eine Höheneigenschaft besitzt.quelle
Ich würde empfehlen, einen MaterialButton zu verwenden, als Sie es so machen können:
new MaterialButton( height: 40.0, minWidth: 70.0, color: Theme.of(context).primaryColor, textColor: Colors.white, child: new Text("push"), onPressed: () => {}, splashColor: Colors.redAccent, )
quelle
Meine bevorzugte Methode, um die Schaltfläche "Erhöhen" mit einem übergeordneten Element zu erstellen, besteht darin, sie mit "Container" zu umschließen. Unten finden Sie einen Beispielcode.
Container( width: double.infinity, child: RaisedButton( onPressed: () {}, color: Colors.deepPurpleAccent[100], child: Text( "Continue", style: TextStyle(color: Colors.white), ), ), )
quelle
Dieser Code hilft Ihnen dabei, Ihr Problem besser zu lösen, da wir die Breite nicht direkt für den RaisedButton angeben können, sondern die Breite für das untergeordnete Element
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, );
quelle
width * 0.8
Sie müssen ein erweitertes Widget verwenden. Befindet sich Ihre Schaltfläche jedoch in einer Spalte, füllt das erweiterte Widget den Rest der Spalte aus. Sie müssen das erweiterte Widget also in eine Zeile einschließen.
Row(children: <Widget>[ Expanded( flex: 1, child: RaisedButton( child: Text("Your Text"), onPressed: _submitForm, ), ),),])
quelle
Wickeln Sie den RaisedButton in den Container und geben Sie dem Container-Widget die Breite.
z.B
Container( width : 200, child : RaisedButton( child :YourWidget , onPressed(){} ), )
quelle
Sie können eine globale Methode erstellen, z. B. für Schaltflächen, die in der gesamten App verwendet werden. Die Größe wird entsprechend der Textlänge im Container geändert. Das FittedBox-Widget wird verwendet, um das Widget an das darin enthaltene Kind anzupassen.
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(); }, ), ); }
Wenn Sie eine Schaltfläche mit einer bestimmten Breite und Höhe wünschen, können Sie die Einschränkungseigenschaft von RawMaterialButton verwenden, um die minimale maximale Breite und Höhe der Schaltfläche anzugeben
constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),
quelle
Kann einfach FractionallySizedBox verwenden.
Dabei definieren widthFactor & heightFactor den Prozentsatz der App- / Elterngröße
FractionallySizedBox( widthFactor: 0.8, //means 80% of app width child: RaisedButton( onPressed: () {}, child: Text( "Your Text", style: TextStyle(color: Colors.white), ), color: Colors.red, )),
quelle
Wenn Sie global die Höhe und die minWidth aller Ihrer ändern möchten
RaisedButton
s, dann können Sie außer Kraft setzenThemeData
in IhremMaterialApp
:@override Widget build(BuildContext context) { return MaterialApp( ... theme: ThemeData( ... buttonTheme: ButtonThemeData( height: 46, minWidth: 100, ), )); }
quelle
Verwenden Sie Media Query, um die Breite für Ihre Lösung sinnvoll zu verwenden, die für kleine und große Bildschirme gleich ist
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 ), )
Sie können eine ähnliche Lösung
SizeBox
auch anwenden .quelle
Sie können tun, was in den Kommentaren steht, oder Sie können den Aufwand sparen und mit RawMaterialButton arbeiten. die alles haben und Sie können den Rand so ändern, dass er kreisförmig ist und viele andere Attribute. ex-Form (vergrößern Sie den Radius, um eine kreisförmigere Form zu erhalten)
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25
und Sie können jede gewünschte Form als Schaltfläche verwenden, indem Sie GestureDetector verwenden, ein Widget, das ein anderes Widget unter dem untergeordneten Attribut akzeptiert. wie im anderen Beispiel hier
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,), ), ) )
quelle
Wenn die Schaltfläche in einem
Flex
Widget (einschließlichRow
&Column
) platziert ist, können Sie sie mit einem erweiterten Widget umbrechen , um den verfügbaren Platz zu füllen.quelle
Expanded
soll in Multi-Child-Widgets wieRow
und verwendet werdenColumn
.In meinem Fall habe ich margin verwendet, um die Größe ändern zu können:
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"), ), ),
quelle
Versuch es
Expanded( child: RaisedButton( onPressed: _onButtonPressed, child: Text('Button1') ) )
quelle