Flutter 响应式文本字段匹配屏幕尺寸

Question

你好，我正在研究 flutter，需要使用匹配所有屏幕的 MediaQuery 让我的 TextField 响应 sizes.I 已经尝试了两种方法，这两种方法都不适用于平板电脑，这是第一个

Container(
                    height: 100.0,
                    width: 300.0,
                    child: TextField(
                      cursorColor: Colors.black,
                      style: TextStyle(color: Colors.pinkAccent),
                      controller: itemNameController,
                      keyboardType: TextInputType.text,
                      decoration: new InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Hello input here',
                        isDense: true,
                        contentPadding: EdgeInsets.only(
                            left: 5, bottom: 11, top: 11, right: 5),
                      ),
                    ),
                  ),

第二种方式是

                           TextField(
                          cursorColor: Colors.black,
                          style: TextStyle(color: Colors.pinkAccent, height: 
                          MediaQuery.of(context).size.height/50),
                          controller: itemNameController,
                          keyboardType: TextInputType.text,
                          decoration: new InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'Hello input here',
                            isDense: true,
                            contentPadding: EdgeInsets.only(
                                left: 5, bottom: 11, top: 11, right: 5),
                          ),
                        ),

他们都没有反映在平板电脑上。谢谢

Answer 1

您是否尝试过将 MediaQuery 用于包含 TextField 的容器的高度和宽度？

你的第一种方式，高度和宽度是固定的，所以TextField的大小不会改变。

在您的第二种方式中，我认为“样式”用于更改 TextField 中文本的样式，而不是 TextField。相反，如果您想更改 TextField 的外观，请使用“装饰”。

Answer 2

我写了一个响应式 class 可以根据屏幕尺寸调整大小。我在 widget classes 中实现了这个 class 并根据屏幕大小给出了一个 int 值。这样，它根据每个 phone.

上的屏幕大小调整大小

class SizeConfig{
    
  double heightSize(BuildContext context, double value){
    value /= 100;
    return MediaQuery.of(context).size.height * value;
  }

  double widthSize(BuildContext context,double value ){
    value /=100;
    return MediaQuery.of(context).size.width * value;
  }
}

你可以这样使用它；

Container(
                height: sizedConfig().heightSize(context, 2.0)
                width: sizedConfig().widthSize(context, 1.5),
                child: TextField(
                  cursorColor: Colors.black,
                  style: TextStyle(color: Colors.pinkAccent),
                  controller: itemNameController,
                  keyboardType: TextInputType.text,
                  decoration: new InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Hello input here',
                    isDense: true,
                    contentPadding: EdgeInsets.only(
                        left: 5, bottom: 11, top: 11, right: 5),
                  ),
                ),
              ),

Answer 3

尽可能避免使用 SizeConfig(custom class) 和硬编码尺寸。示例：MediaQuery.of(context).size.width - someValue

实现响应式 UI 的最简单方法是 Sizer 插件。

响应式 UI 在任何屏幕尺寸的设备和平板电脑中。看看这个插件⬇️
https://pub.dev/packages/sizer

.sp - for font size
.h  - for widget height
.w  - for widget width

如果您想设置响应式文本字段大小，则在值后仅使用 .w 宽度和 .h 高度。

示例：

Container(
            height: 4.0.h    // 4% of screen height
            width: 80.0.w,   // 80% of screen width
            child: TextField(
              cursorColor: Colors.black,
              style: TextStyle(color: Colors.pinkAccent),
              controller: itemNameController,
              keyboardType: TextInputType.text,
              decoration: new InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Hello input here',
                isDense: true,
                contentPadding: EdgeInsets.only(
                    left: 5.0.w, bottom: 1.0.h, top: 1.0.h, right: 5.0.w),
              ),
            ),
          ),

Flutter 响应式文本字段匹配屏幕尺寸

Flutter Responsive Text Field Matching screen sizes

uitextfield

flutter

flutter-layout