在flutter中使用TextField没有变化

Posted 2023-02-23

【中文标题】在flutter中使用TextField没有变化

【英文标题】：No change of TextField when it is used in flutter

【发布时间】：2022-01-05 06:57:47

【问题描述】：

我想知道这是否可能。 TextField 在使用时不会改变。 这是我的代码：

import 'package:flutter/material.dart';


void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);


  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Shop App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage() ,
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key,) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: 
        Padding(
          padding: EdgeInsets.all(25.0),
          child: TextField(
            onChanged: (value) ,
            decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                // width: 0.0 produces a thin "hairline" border
                borderSide: const BorderSide(color: Colors.white, width: 0.0),
                borderRadius: BorderRadius.circular(20.0)
              ),
              fillColor: Colors.white,
              filled: true,
              hintText: "Search",
              hintStyle: TextStyle(
                color:  Colors.grey.withOpacity(0.5),
              ),
            ),
          ),
        )
      ),
    );
  

第一个图像在不使用时显示我的 TextField，第二个在使用时显示它。 我希望我的 TextField 始终看起来一样。只是光标是应该显示的东西。

【参考方案1】：

您应该使用border 而不是enableBorder

// declare 
TextEditingController _controller = TextEditingController();

// in textField
      TextField( 
            controller: _controller,
            onChanged: (value) ,
            decoration: InputDecoration(
              border: OutlineInputBorder(
                // width: 0.0 produces a thin "hairline" border
                borderSide: const BorderSide(color: Colors.white, width: 0.0),
                borderRadius: BorderRadius.circular(20.0)
              ),
              fillColor: Colors.white,
              filled: true,
              hintText: "Search",
              hintStyle: TextStyle(
                color:  Colors.grey.withOpacity(0.5),
              ),

完整的源代码

import 'package:flutter/material.dart';


void main() 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key key) : super(key: key);


  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Shop App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage() ,
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key key,) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
          child:
          Padding(
            padding: EdgeInsets.all(25.0),
            child: TextField(
              controller: _controller,
              onChanged: (value) ,
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  // width: 0.0 produces a thin "hairline" border
                    borderSide: const BorderSide(color: Colors.white, width: 0.0),
                    borderRadius: BorderRadius.circular(20.0)
                ),
                fillColor: Colors.white,
                filled: true,
                hintText: "Search",
                hintStyle: TextStyle(
                  color:  Colors.grey.withOpacity(0.5),
                ),
              ),
            ),
          )
      ),
    );
  

【讨论】：

UI 仍然在变化。

更新了我的答案请看看

你没有理解我的问题。它应该一直看起来都一样。你能帮助它看起来像第一张照片吗？

你不会改变textfield的装饰吧？

更新答案请立即查看