วิธีตั้งค่าความกว้างของ RaisedButton ใน Flutter

ฉันเห็นว่าฉันไม่สามารถกำหนดความกว้างของRaisedButtonFlutter ได้ ถ้าฉันเข้าใจดีฉันควรใส่RaisedButtonลงในไฟล์SizedBox. จากนั้นฉันจะสามารถกำหนดความกว้างหรือความสูงของกล่องได้ ถูกต้องหรือไม่ มีวิธีอื่นที่จะทำได้หรือไม่?

การสร้างSizedBoxปุ่มทุกปุ่มค่อนข้างน่าเบื่อดังนั้นฉันจึงสงสัยว่าทำไมพวกเขาถึงเลือกที่จะทำแบบนี้ ฉันค่อนข้างแน่ใจว่าพวกเขามีเหตุผลที่ดีที่จะทำเช่นนั้น แต่ฉันไม่เห็น นั่งร้านนั้นค่อนข้างยากที่จะอ่านและสร้างขึ้นสำหรับผู้เริ่มต้น

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

ตามที่กล่าวไว้ในเอกสารที่นี่

ปุ่มที่ยกขึ้นมีขนาดขั้นต่ำ 88.0 x 36.0 ซึ่งสามารถแทนที่ด้วย ButtonTheme

คุณสามารถทำมันได้เช่นนั้น

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

สำหรับmatch_parentคุณสามารถใช้

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

สำหรับค่าเฉพาะที่คุณสามารถใช้ได้

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

นั่นเป็นเพราะการกระพือปีกไม่เกี่ยวกับขนาด มันเกี่ยวกับข้อ จำกัด

โดยปกติเรามี 2 กรณีการใช้งาน:

• ลูกของวิดเจ็ตกำหนดข้อ จำกัด ขนาดผู้ปกครองจะขึ้นอยู่กับข้อมูลนั้น เช่น: Paddingซึ่งรับข้อ จำกัด ของเด็กและเพิ่มขึ้น
• ผู้ปกครองบังคับใช้ข้อ จำกัด กับลูก เช่น: SizedBoxแต่ยังColumnอยู่ในโหมด Strech ...

RaisedButtonเป็นกรณีแรก ซึ่งหมายความว่าเป็นปุ่มที่กำหนดความสูง / ความกว้างของมันเอง และตามกฎของวัสดุขนาดปุ่มที่ยกขึ้นได้รับการแก้ไข

คุณไม่ต้องการพฤติกรรมนั้นดังนั้นคุณสามารถใช้วิดเจ็ตประเภทที่สองเพื่อลบล้างข้อ จำกัด ของปุ่ม

อย่างไรก็ตามหากคุณต้องการสิ่งนี้มากให้พิจารณาสร้างวิดเจ็ตใหม่ที่เหมาะกับคุณ หรือใช้MaterialButtonซึ่งมีคุณสมบัติสูง

ฉันอยากจะแนะนำให้ใช้ MaterialButton กว่าที่คุณจะทำได้เช่นนี้:

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

คุณต้องใช้วิดเจ็ตแบบขยาย แต่ถ้าปุ่มของคุณอยู่บนคอลัมน์วิดเจ็ตแบบขยายจะเติมส่วนที่เหลือของคอลัมน์ ดังนั้นคุณต้องใส่ Expanded Widget ไว้ในแถว

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

วิธีที่ฉันชอบในการสร้างปุ่ม Raise กับพาเรนต์ที่ตรงกันคือห่อด้วยคอนเทนเนอร์ ด้านล่างนี้คือโค้ดตัวอย่าง

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

โค้ดส่วนนี้จะช่วยให้คุณแก้ปัญหาได้ดีขึ้นเนื่องจากเราไม่สามารถระบุความกว้างให้กับ RaisedButton ได้โดยตรงเราจึงระบุความกว้างให้กับมันได้

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

เพียงใช้FractionallySizedBoxที่ไหนwidthFactorและheightFactor กำหนดเปอร์เซ็นต์ของขนาดแอป / ผู้ปกครอง

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

ใช้ Media Query เพื่อใช้ความกว้างอย่างชาญฉลาดสำหรับโซลูชันของคุณซึ่งจะทำงานเหมือนกันสำหรับหน้าจอขนาดเล็กและขนาดใหญ่

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

คุณสามารถใช้วิธีการแก้ปัญหาที่คล้ายกับSizeBoxยัง

หากคุณต้องการเปลี่ยนความสูงและ minWidth ของทั้งหมดของคุณทั่วโลกRaisedButtonคุณสามารถแทนที่ThemeDataภายในของคุณMaterialApp:

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

Wrap RaisedButton ภายใน Container และให้ความกว้างแก่ Container Widget

เช่น

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

คุณสามารถสร้างวิธีการทั่วโลกเช่นสำหรับปุ่มที่ใช้ทั่วแอป จะปรับขนาดตามความยาวของข้อความภายในคอนเทนเนอร์ วิดเจ็ต FittedBox ใช้เพื่อทำให้วิดเจ็ตเหมาะสมกับเด็กที่อยู่ข้างใน

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

หากคุณต้องการปุ่มที่มีความกว้างและความสูงเฉพาะคุณสามารถใช้คุณสมบัติข้อ จำกัด ของ RawMaterialButton เพื่อให้ความกว้างและความสูงสูงสุดของปุ่มต่ำสุด

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

คุณสามารถทำตามที่พวกเขาพูดในความคิดเห็นหรือคุณสามารถประหยัดความพยายามและทำงานกับ RawMaterialButton ซึ่งมีทุกอย่างและคุณสามารถเปลี่ยนเส้นขอบให้เป็นวงกลมและมีคุณสมบัติอื่น ๆ อีกมากมาย รูปร่าง ex (เพิ่มรัศมีให้มีรูปร่างกลมมากขึ้น)

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

และคุณสามารถใช้รูปร่างใดก็ได้ที่คุณต้องการเป็นปุ่มโดยใช้ GestureDetector ซึ่งเป็นวิดเจ็ตและยอมรับวิดเจ็ตอื่นภายใต้แอตทริบิวต์ลูก เช่นในตัวอย่างอื่น ๆ ที่นี่

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

หากวางปุ่มไว้ในFlexวิดเจ็ต (รวมถึงRow& Column) คุณสามารถรวมปุ่มได้โดยใช้วิดเจ็ตแบบขยายเพื่อเติมเต็มพื้นที่ว่าง

ในกรณีของฉันฉันใช้ระยะขอบเพื่อให้สามารถเปลี่ยนขนาดได้:

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

ลองใช้งาน

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

หากคุณไม่ต้องการลบชุดรูปแบบปุ่มทั้งหมดที่ตั้งค่าไว้

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

หากคุณมีปุ่มภายในคอลัมน์ () และต้องการให้ปุ่มมีความกว้างสูงสุดให้ตั้งค่า:

crossAxisAlignment: CrossAxisAlignment.stretch

ในวิดเจ็ตคอลัมน์ของคุณ ตอนนี้ทุกอย่างภายใต้คอลัมน์นี้ () จะมีความกว้างสูงสุดที่พร้อมใช้งาน

สิ่งนี้ได้ผลสำหรับฉัน คอนเทนเนอร์มีความสูงและ FractionallySizedBox ให้ความกว้างสำหรับ RaisedButton

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

วิธีแก้ปัญหาที่สั้นและไพเราะสำหรับปุ่มแบบเต็มความกว้าง:

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