如何在 Flutter 中隐藏 TextField 边框的一侧？

Question

我正在使用 TextField 小部件，我想隐藏左侧边框，如下所示：

TextField(
  decoration: new InputDecoration(
      border: new OutlineInputBorder(
          borderSide: const BorderSide(width: 2.0, style: BorderStyle.solid),
          borderRadius: BorderRadius.circular(50.0)),
      focusedBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.grey, width: 2.0),
        borderRadius: BorderRadius.circular(50.0),
      ),
      hintText: 'User Name',
      hintStyle: new TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
      suffixIcon: const Icon(Icons.person, size: 30.0, color: Colors.grey),
      errorText: snapshot.error),
);

提前致谢！

Answer 1

您可以更改 BoxDecoration

decoration: BoxDecoration(
   border: Border(
    left: BorderSide(width: 16.0, color: Colors.transparent),
    top: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
    right: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
    bottom: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
),

Answer 2

borderRadius只能指定为统一边框，即每边具有相同宽度和颜色的边框。

您可以通过将 TextField 包装成 Container 并使用 BoxShadow 属性:

来实现类似的效果

下面是截图示例的完整片段：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          decoration: BoxDecoration(
            //borderRadius: BorderRadius.circular(10),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                offset: Offset(2, 0),
                color: Colors.grey,
                spreadRadius: 0,
                blurRadius: 2,
              ),
            ],
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
          child: TextField(
            textAlign: TextAlign.center,
            decoration: new InputDecoration(
              border: InputBorder.none,
              hintText: 'User Name',
              hintStyle: new TextStyle(
                  color: Colors.grey, fontWeight: FontWeight.bold),
              suffixIcon: const Icon(
                Icons.person,
                size: 30.0,
                color: Colors.grey,
              ),
            ),
          ),
        ),
      ),
    );
    //
  }
}

第二个更 hackier 的解决方法是使用位于最左侧的 Stack 和 Container 来隐藏左边框。虽然，在这种情况下，可能很难使用 Colors.transparent 背景。

完整代码段如下：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          height: 50,
          child: Stack(
            overflow: Overflow.visible,
            children: [
              TextField(
                textAlign: TextAlign.center,
                decoration: new InputDecoration(
                  border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey, width: 1),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  hintText: 'User Name',
                  hintStyle: new TextStyle(
                      color: Colors.grey, fontWeight: FontWeight.bold),
                  suffixIcon: const Icon(
                    Icons.person,
                    size: 30.0,
                    color: Colors.grey,
                  ),
                ),
              ),
              Positioned(
                left: 0,
                bottom: 0,
                child: Container(
                  width: 20,
                  height: 50,
                  color: Theme.of(context).scaffoldBackgroundColor,
                ),
              ),
            ],
          ),
        ),
      ),
    );
    //
  }
}

Answer 3

自 2022 年起 我想添加一个使用包 assorted_layout_widgets:

的解决方案

NonUniformOutlineInputBorder

可用于样式 text-fields 和容器.

类似于Flutter的原生OutlineInputBorder，但是你可以隐藏一些边，通过设置hideTopSide、hideBottomSide、hideRightSide和hideLeftSide来真.

text-fields 的用法：

TextField(
   decoration: InputDecoration(
      enabledBorder: NonUniformOutlineInputBorder(hideLeftSide: true, ...),
      ...

容器的用法：

Container(
   decoration: ShapeDecoration(
      shape: NonUniformOutlineInputBorder(
         hideLeftSide: true,
         borderSide: BorderSide(width: 10),
         borderRadius: BorderRadius.only(
            topRight: Radius.circular(15),
            bottomRight: Radius.circular(35),
         ),          
   ...

非均匀圆角矩形边框

可用于设置按钮和容器的样式。

类似于 Flutter 的原生 RoundedRectangleBorder 但你可以隐藏一些边，通过将 hideTopSide、hideBottomSide、hideRightSide 和 hideLeftSide 设置为真.

按钮的用法：

ElevatedButton(
   style: ElevatedButton.styleFrom(
      shape: NonUniformRoundedRectangleBorder(
         hideLeftSide: true,
         side: BorderSide(color: Colors.black87, width: 15.0),
         borderRadius: BorderRadius.only(
            topRight: Radius.circular(15),
            bottomRight: Radius.circular(35),
         ), 
      ...

容器的用法：

Container(
   decoration: ShapeDecoration(
      shape: NonUniformRoundedRectangleBorder(...)),
   ...

注意：我是那个包的作者。

如何在 Flutter 中隐藏 TextField 边框的一侧？

How to hide one side of the border of a TextField, in Flutter?

border

textfield

dart

flutter

NonUniformOutlineInputBorder

非均匀圆角矩形边框