如何降低文本表单字段的边界宽度？

发布于 2025-01-24 11:44:51 字数 1970 浏览 0 评论 0原文

我需要减少Textfield边界侧的宽度。我该怎么做？

final emailNameField = TextFormField(
      autofocus: false,
      controller: emailEditingController,
      keyboardType: TextInputType.emailAddress,
      validator: (email) => email != null && !EmailValidator.validate(email)
          ? "Enter a valid Email"
          : null,
      onSaved: (email) {
        emailEditingController.text = '$email';
      },
      textInputAction: TextInputAction.next,
      decoration: const InputDecoration(
          prefixIcon: Icon(Icons.mail),
          contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
          prefixIconColor: Colors.red,
          border: OutlineInputBorder(
              borderRadius: BorderRadius.only(),
              borderSide: BorderSide(width: 1)),
          hintText: 'Email '),
    );

    //password field
    final passwordNameField = TextFormField(
        autofocus: false,
        controller: passwordEditingController,
        obscureText: true,
        onSaved: (value) {
          passwordEditingController.text = 'value';
        },
        textInputAction: TextInputAction.done,
        decoration: const InputDecoration(
            prefixIcon: Icon(Icons.vpn_key),
            contentPadding: EdgeInsets.fromLTRB(200, 15, 20, 15),
            prefixIconColor: Colors.red,
            border: OutlineInputBorder(
                borderSide: const BorderSide(
                    width: 2, color: Color.fromARGB(26, 204, 32, 32))),
            hintText: 'Password ',
            suffixIcon: Icon(Icons.remove_red_eye_rounded)));

原文

I need to reduce the width of my border side in TextField. How can I do that?

final emailNameField = TextFormField(
      autofocus: false,
      controller: emailEditingController,
      keyboardType: TextInputType.emailAddress,
      validator: (email) => email != null && !EmailValidator.validate(email)
          ? "Enter a valid Email"
          : null,
      onSaved: (email) {
        emailEditingController.text = '$email';
      },
      textInputAction: TextInputAction.next,
      decoration: const InputDecoration(
          prefixIcon: Icon(Icons.mail),
          contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
          prefixIconColor: Colors.red,
          border: OutlineInputBorder(
              borderRadius: BorderRadius.only(),
              borderSide: BorderSide(width: 1)),
          hintText: 'Email '),
    );

    //password field
    final passwordNameField = TextFormField(
        autofocus: false,
        controller: passwordEditingController,
        obscureText: true,
        onSaved: (value) {
          passwordEditingController.text = 'value';
        },
        textInputAction: TextInputAction.done,
        decoration: const InputDecoration(
            prefixIcon: Icon(Icons.vpn_key),
            contentPadding: EdgeInsets.fromLTRB(200, 15, 20, 15),
            prefixIconColor: Colors.red,
            border: OutlineInputBorder(
                borderSide: const BorderSide(
                    width: 2, color: Color.fromARGB(26, 204, 32, 32))),
            hintText: 'Password ',
            suffixIcon: Icon(Icons.remove_red_eye_rounded)));

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心安伴我暖 2025-01-31 11:44:51

您可以包装父card窗口小部件填充物，或者只需使用Margin外部间距的属性，然后用填充物包装column用填充物来提供内部间距。

Card(
  //for out side or wrap with padding widget
  margin: const EdgeInsets.all(8.0), 
  color: Colors.cyanAccent,

  // for inner spaciing
  child: Padding(
    // replace 16 with your desire padding value
    // padding: const EdgeInsets.all(16.0),
    padding:
        EdgeInsets.only(left: 16, top: 16, right: 16, bottom: 16),
    child: Column(
      children: [
        TextField(),
        //...
      ],
    ),
  ),
)

有关 card> card 。

You can wrap parent Card widget padding or just use margin property for outside spacing, and wrap Column widget with padding to provide inner spacing.

Card(
  //for out side or wrap with padding widget
  margin: const EdgeInsets.all(8.0), 
  color: Colors.cyanAccent,

  // for inner spaciing
  child: Padding(
    // replace 16 with your desire padding value
    // padding: const EdgeInsets.all(16.0),
    padding:
        EdgeInsets.only(left: 16, top: 16, right: 16, bottom: 16),
    child: Column(
      children: [
        TextField(),
        //...
      ],
    ),
  ),
)

More about Padding and Card.

回复收藏 0 原文

凉薄对峙 2025-01-31 11:44:51

您可以通过装饰属性来实现这一目标，这是一个示例。
请注意，您可以使用多种类型的边界样式。

文档非常清晰，直截了当地解释了
https://api.flutter.dev/flutter/flutter/material/material/material/inputdecoration/inputdecoration-class。 html

 装饰：inputDecoration（                
              边界：inputborder.none，
              启用BORDER：OUTLINEINPUTBORDER（
                Borderside：Const Borderside（
                    颜色：color.fromargb（255，223，223，223），宽度：1.5），
              ），

You can achieve that through decoration property, here is a sample.
Pay attention that there is more than one type of borders styling you can apply.

the docs are very clear and straight to the point in explaining that
https://api.flutter.dev/flutter/material/InputDecoration-class.html

 decoration: InputDecoration(                
              border: InputBorder.none,
              enabledBorder: OutlineInputBorder(
                borderSide: const BorderSide(
                    color: Color.fromARGB(255, 223, 223, 223), width: 1.5),
              ),

回复收藏 0 原文

~没有更多了~