Question

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

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

          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,
                  context: context,
                  height: 35,
                  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 borderRadius = 0,
    double paddingLeft = 20,
    double paddingRight: 20,
    double width = 460,
    double widthPercent = 0,
    double height = 50,
    double fontSize = 16,
    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,
    height: height,
    padding: EdgeInsets.only(left: paddingLeft, right: paddingRight),
    margin: EdgeInsets.only(left: 5),
    alignment: Alignment.topLeft,
    color: Colors.amber,
    child: RaisedButton(
      onPressed: () {
        func();
      },
      padding: EdgeInsets.only(left: paddingLeft, right: paddingRight),
      highlightColor: bacground,
      color: bacground,
      child: Text(label,
          style: TextStyle(
              fontWeight: fontWeight, color: fontColor, fontSize: fontSize)),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius)),
    ),
  );
}

Answer 1

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

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

Answer 2

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

按钮：

  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, color: Colors.red, fontSize: fontSize)),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius)),
    ),
  );
}

输入：

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,
    alignment: Alignment.topLeft,
    color: Colors.amber,
    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,
            ),
          )),
    ),
  );
}

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

2 个答案: