如何在 Flutter 中更改边框的宽度和颜色答案

【问题标题】：How to change width and color of the border in Flutter如何在 Flutter 中更改边框的宽度和颜色
【发布时间】：2021-06-12 00:04:39
【问题描述】：

我正在尝试使用 borderSide() 更改 OutlineInputBorder 边框的颜色，但它不起作用，这是我的代码：

TextField(
  keyboardType: TextInputType.text,
  style: TextStyle(fontSize: 15),
   decoration: InputDecoration(
   contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 10),
   hintText: "Senha",
   filled: true,
   fillColor: new Color(0xfffafafa),
   border: OutlineInputBorder(
    borderSide: BorderSide(
        color: Colors.red,
        width: 2.0,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
  ),
),

【问题讨论】：

检查并根据需要修改stackoverflow.com/questions/50122394/…

标签： flutter

【解决方案1】：

文本字段有多种状态。文本字段可以启用、禁用等，您需要处理不同状态的情况。您需要为文本字段可以具有的不同状态声明边框样式。

在您的情况下，我怀疑您有兴趣设置 focusedBorder 以在文本字段被聚焦时更改边框的样式。考虑这个可以在 dartpad.dev 上运行的示例。

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'labelText',
                hintText: 'hintText',
                filled: true,
                fillColor: Theme.of(context).canvasColor,
                counterText: "counterText ",
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                  borderSide: BorderSide(
                    width: 3,
                    color: Colors.green,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                  borderSide: BorderSide(
                    width: 1,
                    color: Colors.red,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

您可以看到，当它处于活动状态但未获得焦点时，我将边框设置为红色，然后在文本字段获得焦点时将其设置为绿色。为其他文本字段状态尝试不同的边框样式，例如errorBorder，看看它的表现如何。

【讨论】：