flutter web forms 在 mac 浏览器（firefox、chrome）中工作，但在 windows 或 ios 浏览器（firefox、chrome、safari）中不起作用

Question

所以我是 flutter 的新手，也许我已经完全厌倦了 forms，但是我得到了这种奇怪的行为，表单在 Mac OS 下的浏览器中工作得很好，但在 Windows 或 iOS 上的浏览器中根本不起作用。通过工作，我的意思是能够使用按钮提交数据。

这似乎是一个时髦布局的问题：控件相互覆盖，但我不确定为什么这会发生在 windows 和 iOS 而不是在 macOS 上。 它跨浏览器是一致的：它似乎在 mac 上的每个浏览器中都能正常工作，但在 iOS 或 Windows 上的任何浏览器中都不起作用。

Flutter 1.25.0-8.1.pre • 通道测试版 • https://github.com/flutter/flutter.git框架 • 修订版 8f89f6505b（2 周前） • 2020-12-15 15:07:52 -0800 引擎 • 修订版92ae191c17 工具 • Dart 2.12.0（内部版本 2.12.0-133.2.beta）

WORKS：（可以在字段中输入数据，点击提交，数据显示在下方）macOS Catalina Version 10.15.7 Firefox: 84.0.1, Chrome: 87.0.4280.88 (Official Build) (x86_64), Safari: 14.0.1 (15610.2) .11.51.10, 15610)

不工作（选择字段不稳定，按钮不可按下，无法提交数据）Windows 10 Pro 20H2，Firefox 84.6.1，Edge iOS 14.2 Safari，Firefox，Chrome（最新版本）

我正在使用 nginx/1.18.0 (Ubuntu) 服务 flutter web 构建。

form_widget.dart：

import 'package:field_test/helpers/size_helpers.dart';
import 'package:flutter/material.dart';

class FormWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _FormWidgetState();

}

class _FormWidgetState extends State<FormWidget> {
  String _keywords, _keywords_display = "";
  String _type, _type_display = "";
  String _state, _state_display = "";

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  Widget _buildKeywordsField() {
    return TextFormField(
        decoration: InputDecoration(labelText: 'Keywords'),
        onSaved: (String value) {
          _keywords = value;
          print(_keywords + "saved");
        }
    );
  }

  Widget _buildTypeField() {
    return TextFormField(
        decoration: InputDecoration(labelText: 'Type'),
        onSaved: (String value) {
          _type = value;
          print(_type + "saved");
        }
    );
  }

  Widget _buildStateField() {
    return TextFormField(
        decoration: InputDecoration(labelText: 'State'),
        onSaved: (String value) {
          _state = value;
          print(_state + "saved");
        }
    );
  }

  void _update() {
    print("update called");
    setState(() {
      _keywords_display = _keywords;
      _type_display = _type;
      _state_display = _state;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Form Widget",
          style: TextStyle(
            color: Colors.white, fontWeight: FontWeight.bold
          )
        )
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget> [
            Expanded(
              child: Container(
                margin: EdgeInsets.all(24),
                child: Form(
                  key: _formKey,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget> [
                      _buildKeywordsField(),
                      _buildTypeField(),
                      _buildStateField(),
                      SizedBox(height: 15),
                      RaisedButton(
                        child: Text(
                          'Search',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                        onPressed: () => {
                          _formKey.currentState.save(),
                          _update(),
                        }
                      )
                    ]
                  )
                )
              )
            ),
            Container(
              width: displayWidth(context) * .95,
              height: displayHeight(context) * .75,
              child:
                Builder(
                  builder: (_) {
                    return ListView.separated(
                      separatorBuilder: (_, __) =>
                      Divider(height: 1, color: Colors.orange),
                      itemBuilder: (_, index) {
                        return ListTile(
                          isThreeLine: true,
                          title: Text(
                            "Keywords: " + _keywords_display,
                            style: TextStyle(color: Theme.of(context).primaryColor),
                          ),
                          subtitle: Text(
                              "Type: " + _type_display + "\nState: " + _state_display,
                          maxLines: 2,
                            ),
                          );
                        },
                      itemCount: 1,
                    );

                  }),
            )]
        )
      )
    );
  }
}

size_helpers.dart：

import 'package:flutter/material.dart';

Size displaySize(BuildContext context) {
  return MediaQuery.of(context).size;
}

double displayHeight(BuildContext context) {
  return displaySize(context).height;
}

double displayWidth(BuildContext context) {
  return displaySize(context).width;
}

主要.dart：

import 'package:field_test/widgets/form_widget.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: FormWidget(),
    );
  }
}

Answer 1

解决了。 我把表格过于复杂了。 表单部分中的 Expanded() 似乎混淆了浏览器。 以下代码适用于所有平台 AFAICT：

body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                      margin: EdgeInsets.all(24),
                      child: 
                      Form(
                  key: _formKey,
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        _buildKeywordsField(),
                        _buildTypeField(),
                        _buildStateField(),
                        SizedBox(height: 15),
                        RaisedButton(
                            child: Text(
                              'Search',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 16),
                            ),
                            onPressed: () => {
                                  _formKey.currentState.save(),
                                  _update(),
                                })
                      ])
                      ),
,
                      ),