为什么RaisedButton和TextField不继承父Container小部件的尺寸

问题描述

为什么RaisedButton和TextField不继承父Container小部件的尺寸。 我希望能够准确确定按钮和输入的大小。

Draw raisedButton and

初始化两个小部件输入和按钮的行

          Row(
            mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
              input(Icon(Icons.lock),'Токен бота',_botTokenController,false,widthPercent: 80,height: 35,context: context,paddingLeft: 50,paddingRight: 0),button('Добавить',() => {print('hello world')},paddingLeft: 0,widthPercent: 10,fontWeight: FontWeight.normal,fontColor: Color.fromRGBO(0,51,103,1),fontSize: 14),],),

输入小部件（TextField）

Widget input(
  Icon icon,String hint,TextEditingController controller,bool obscure,{
  double height = 50,double width = 460,double paddingLeft = 20,double paddingRight = 20,BuildContext context,double borderRadius = 0,double widthPercent = 0,double fontSize = 16,}) {
  if (context != null) {
    if (widthPercent > 0 && widthPercent <= 100) {
      width = widthPercent / 100 * MediaQuery.of(context).size.width;
    } else {
      width = MediaQuery.of(context).size.width;
    }
  }

  return Container(
    width: width,height: height,padding: EdgeInsets.only(left: paddingLeft,right: paddingRight),alignment: Alignment.topLeft,color: Colors.amber,child: TextField(
      controller: controller,obscureText: obscure,style: TextStyle(fontSize: fontSize,color: textPrimaryColor),decoration: InputDecoration(
          border: OutlineInputBorder(),isDense: true,// Added this
          contentPadding: EdgeInsets.all(8),hintStyle: TextStyle(
              fontWeight: FontWeight.bold,fontSize: fontSize,color: Colors.black54),hintText: hint,focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(borderRadius),borderSide: BorderSide(color: Colors.black87,width: 2)),enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(borderRadius),borderSide: BorderSide(color: Colors.black54,width: 1)),prefixIcon: Padding(
            padding: EdgeInsets.only(left: 10,right: 10),child: IconTheme(
              data: IconThemeData(color: Colors.black54),child: icon,)),);
}

按钮小部件（RaisedButton）

Widget button(String label,void func(),{BuildContext context = null,double paddingRight: 20,double height = 50,Color bacground = buttonPrimaryColor,FontWeight fontWeight = FontWeight.bold,Color fontColor = textPrimaryColor}) {
  if (context != null) {
    if (widthPercent > 0 && widthPercent <= 100) {
      width = widthPercent / 100 * MediaQuery.of(context).size.width;
    }
  }

  return Container(
    width: width,margin: EdgeInsets.only(left: 5),child: RaisedButton(
      onPressed: () {
        func();
      },highlightColor: bacground,color: bacground,child: Text(label,style: TextStyle(
              fontWeight: fontWeight,color: fontColor,fontSize: fontSize)),shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius)),);
}

解决方法

尝试FractionallySizedBox会根据父级尺寸调整小部件的大小，

FractionallySizedBox(
           heightFactor: 0.7,//70% height of your parent widget
           widthFactor: 0.6,//60% width of your parent widget
         )

,

除去多余的填充物或将填充物带到容器侧面。删除以下代码。

按钮：

  Widget button(
  String label,void func(),{
  BuildContext context = null,double borderRadius = 0,double paddingLeft = 20,double paddingRight: 20,double width = 460,double widthPercent = 0,double height = 50,double fontSize = 16,FontWeight fontWeight = FontWeight.bold,}) {
  if (context != null) {
    if (widthPercent > 0 && widthPercent <= 100) {
      width = widthPercent / 100 * MediaQuery.of(context).size.width;
    }
  }

  return Container(
    width: width,height: height,margin: EdgeInsets.only(left: 5),alignment: Alignment.topLeft,color: Colors.amber,child: RaisedButton(
      onPressed: () {
        func();
      },padding: EdgeInsets.only(left: paddingLeft,right: paddingRight),highlightColor: Colors.red,color: Colors.red,child: Text(label,style: TextStyle(
              fontWeight: fontWeight,fontSize: fontSize)),shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius)),),);
}

输入：

Widget input(
  Icon icon,String hint,TextEditingController controller,bool obscure,{
  double height = 50,double paddingRight = 20,BuildContext context,}) {
  if (context != null) {
    if (widthPercent > 0 && widthPercent <= 100) {
      width = widthPercent / 100 * MediaQuery.of(context).size.width;
    } else {
      width = MediaQuery.of(context).size.width;
    }
  }

  return Container(
    width: width,child: TextField(
      controller: controller,obscureText: obscure,style: TextStyle(fontSize: fontSize),decoration: InputDecoration(
          border: OutlineInputBorder(),isDense: true,// Added this
          contentPadding: EdgeInsets.all(8),hintStyle: TextStyle(
              fontWeight: FontWeight.bold,fontSize: fontSize,color: Colors.black54),hintText: hint,focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(borderRadius),borderSide: BorderSide(color: Colors.black87,width: 2)),enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(borderRadius),borderSide: BorderSide(color: Colors.black54,width: 1)),prefixIcon: Padding(
            padding: EdgeInsets.only(left: 10,right: 10),child: IconTheme(
              data: IconThemeData(color: Colors.black54),child: icon,)),);
}