问Flutter textField字体填满后消失
EN

Stack Overflow用户

提问于 2021-08-12 14:20:40

回答 2查看 85关注 0票数 1

我使用的是简单的TextFormField，但问题是当我输入一些内容时，它会显示出来，但是TextField中的空格字体消失了。

                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(5),
                          bottomLeft: Radius.circular(5)),
                      child: Material(
                        shape: Border(
                          left: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          bottom: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          top: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                        ),
                        child: Container(
                          width: Width * 0.56,
                          height: Height * 0.07,
                          decoration: BoxDecoration(
                            color: Color(0xffFAFAFA),
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(5),
                                bottomLeft: Radius.circular(5)),
                          ),
                          child: Center(
                              child: Text(
                            'https://www.app.stalkme.co/',
                            style: TextStyle(
                                color: textGreyColor, fontSize: 15, fontFamily: 'SegoeUI'),

                                
                          )),
                        ),
                      ),
                    ),
                    Container(
                      width: Width * 0.34,
                      height: Height * 0.07,
                      child: TextFormField(
                        controller: nfcUrl,
                        key: ValueKey('name'),
                        style: TextStyle(color: textGreyColor, fontFamily:'SegoeUI'),
                        decoration: new InputDecoration(
                          enabledBorder: new OutlineInputBorder(
                            borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(5),
                                bottomRight: Radius.circular(5)),
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                          ),
                          filled: true,
                          hintStyle: new TextStyle(
                              color: textGreyColor, fontSize: 15, fontFamily: 'SegoeUI'),
                          fillColor: Colors.white,
                          focusedBorder: OutlineInputBorder(
                            borderSide: const BorderSide(
                                color: Color(0xffE6E6E6), width: 1),
                            borderRadius: const BorderRadius.only(
                                topRight: Radius.circular(5),
                                bottomRight: Radius.circular(5)),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),

这只发生在安卓设备上，奇怪的是，它没有在我的ios模拟器中造成任何问题，但当我在安卓设备上进行构建或测试时，我的字体在TextFormField填充后消失，没有空间

flutter

dart

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 2

Stack Overflow用户

发布于 2021-08-12 23:01:08

为了让TextField的文本正常显示，它需要正常的高度，但是如果你给它的高度低于它显示文本所需的高度，这种情况就会发生(如果设置为height: Height * 0.09或更高，你的问题就解决了)。

要减小TextField的高度，可以更改属性contentPadding或将isDense设置为true

TextFormField(
  decoration: InputDecoration(
    isDense: true,
    //contentPadding: EdgeInsets.all(0), //or any padding
    ) ...

票数 1

Stack Overflow用户

发布于 2021-08-12 19:15:06

通过用Expanded包装第二个Container来测试你的文章中的代码。从我的角度看似乎没问题。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      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> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Container(
          width: size.width,
          height: size.height,
          child: SingleChildScrollView(
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(5),
                          bottomLeft: Radius.circular(5)),
                      child: Material(
                        shape: Border(
                          left: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          bottom: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                          top: BorderSide(
                            width: 1,
                            color: Color(0xffE6E6E6),
                          ),
                        ),
                        child: Container(
                          width: Width * 0.56,
                          height:  Height * 0.07,
                          decoration: BoxDecoration(
                            color: Color(0xffFAFAFA),
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(5),
                                bottomLeft: Radius.circular(5)),
                          ),
                          child: Center(
                              child: Text(
                                'https://www.app.stalkme.co/',
                                style: TextStyle(
                                    color: Colors.grey, fontSize: 15, fontFamily: 'SegoeUI'),


                              )),
                        ),
                      ),
                    ),
                    Expanded(
                      child:Container(
                        width: Width * 0.34,
                        height: Height * 0.07,
                        child: TextFormField(
                          controller: nfcUrl,
                          key: ValueKey('name'),
                          style: TextStyle(color: Colors.grey, fontFamily:'SegoeUI'),
                          decoration: new InputDecoration(
                            enabledBorder: new OutlineInputBorder(
                              borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(5),
                                  bottomRight: Radius.circular(5)),
                              borderSide: const BorderSide(
                                  color: Color(0xffE6E6E6), width: 1),
                            ),
                            filled: true,
                            hintStyle: new TextStyle(
                                color: Colors.grey, fontSize: 15, fontFamily: 'SegoeUI'),
                            fillColor: Colors.white,
                            focusedBorder: OutlineInputBorder(
                              borderSide: const BorderSide(
                                  color: Color(0xffE6E6E6), width: 1),
                              borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(5),
                                  bottomRight: Radius.circular(5)),
                            ),
                          ),
                        ),
                      ),
                    ),

                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}