Question

遇到此问题时，我正在使用文本字段。我在文本字段下方放置了一个平面按钮。现在，发生的事情是，当我点击文本字段以编写任何内容时，我的移动键盘就会出现。一切正常，直到这里。现在，在文本字段中输入任何数据并按下移动键盘上的完成按钮之后，移动键盘消失了。我可以按文本字段下方的平面按钮。如果这样做，一切都会顺利进行。但......... 当我在文本字段中输入任何数据时，如果我直接点击放置的平面按钮，而没有按下移动键盘上的完成按钮，那么我会看到一秒钟的溢出消息。尽管仅一秒钟就可以看到溢出消息，但这仍然很烦人。我不知道该怎么办。请帮我。我已附上一个显示该问题的小视频链接。在录像中，我点击了移动键盘上的完成按钮，然后点击了平面按钮。然后，第二次，我再次在文本字段中键入内容，并且没有按完成按钮，而是点击了平面按钮。您还将看到溢出警告。请帮我的朋友们。谢谢！

Here is a recording of the problem that I have been facing. Please have a look at it and help me. Thanks!!

 Container(
            padding: EdgeInsets.all(20.0),
            child: TextField(
              style: TextStyle(
                color: Colors.black,
                fontSize: 18,
              ),
              decoration: kTextFieldInputDecoration,
              onChanged: (value) {
                cityName = value;
              },
            ),
          ),

Answer 1

请参考此文档https://medium.com/@rubensdemelo/flutter-forms-improving-ui-ux-with-singlechildscrollview-7b91aa981475

您可以使用SingleChildScrollView

包装容器

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(
    MyApp(),
  );
}

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final TextStyle textstyle =
      TextStyle(color: Colors.white, fontWeight: FontWeight.bold);
  final InputDecoration decoration = InputDecoration(
    border: OutlineInputBorder(),
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                FlutterLogo(
                  size: 190,
                ),
                SizedBox(
                  height: 15,
                ),
                TextFormField(
                  decoration: decoration,
                ),
                SizedBox(
                  height: 15,
                ),
                TextFormField(
                  decoration: decoration,
                ),
                SizedBox(
                  height: 15,
                ),
                MaterialButton(
                  color: Colors.red,
                  minWidth: 160,
                  child: Text(
                    'Google',
                    style: textstyle,
                  ),
                ),
                MaterialButton(
                  color: Colors.blue,
                  minWidth: 160,
                  child: Text(
                    'Facebook',
                    style: textstyle,
                  ),
                ),
                MaterialButton(
                  color: Colors.orange,
                  minWidth: 160,
                  child: Text(
                    'E-mail',
                    style: textstyle,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

颤振中的溢出问题

1 个答案: