在 flutter 中使用时 TextField 没有变化

Question

我想知道这是否可能。 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 始终保持一致。只有光标是应该显示的东西。

Answer 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),
                ),
              ),
            ),
          )
      ),
    );
  }
}

在 flutter 中使用时 TextField 没有变化

No change of TextField when it is used in flutter

textfield

flutter

flutter-layout

flutter-widget