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

【问题标题】：Flutter Responsive Text Field Matching screen sizesFlutter 响应式文本字段匹配屏幕尺寸
【发布时间】：2020-12-10 15:57:32
【问题描述】：

您好，我正在处理颤动，需要使用与所有屏幕尺寸匹配的 MediaQuery 使我的 TextField 响应。我尝试了两种方法，这两种方法都不适用于平板电脑，这是第一个

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

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

【问题讨论】：

使用第一个实现并将容器的宽度设置为double.infinity

标签： flutter uitextfield flutter-layout

【解决方案1】：

尽可能避免 SizeConfig（自定义类）和硬编码尺寸。示例：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),
              ),
            ),
          ),

【讨论】：

【解决方案2】：

我编写了一个响应式类，可以根据屏幕大小调整大小。我在小部件类中实现这个类，并根据屏幕大小给出一个 int 值。这样，它会根据每部手机的屏幕大小调整大小。

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

【讨论】：

谢谢所有一切都是最好的，但 Mert Toptas 的回答非常好

【解决方案3】：

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

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

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

【讨论】：