尝试在 Flutter 中设置行小部件的框约束

Question

好的，所以我正在使用 Flutter，并尝试将整个 Row 小部件的约束设置为屏幕的宽度，不设置行的每个单独部分的约束。我搜索过无处不在，并且 Row 小部件没有要设置的宽度或最大宽度参数（它将其设置为由于某种原因无穷大）并且行内的两件事之一必须是文本字段（我是在 iOS 上开发，所以我使用的是 CupertinoTextField，但这应该没什么区别。

脚手架小部件的主体示例如下：

  body: Container(
    constraints: BoxConstraints.tight(new Size(MediaQuery.of(context).size.width, double.infinity)),
    child: Row(
      children: [
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
        CupertinoTextField(
          textInputAction: TextInputAction.done,
          keyboardType: TextInputType.text,
          onSubmitted: (value) {
            notes = value;
          },
          controller: textInput,
        ),
      ], 
    )
  )

如您所想，我遇到了无限渲染框错误，因为该行未受限正确，我不知道为什么 Flutter 不让我为整行设置计数框。（或者即使是，也不是我做的那样！）

Flutter Doctor -v 的结果

[✓] Flutter (Channel master, v1.14.2-pre.20, on Mac OS X 10.15.2 19C57, locale
    en-CA)
    • Flutter version 1.14.2-pre.20 at /Users/iosdev/Developer/flutter
    • Framework revision 91f8d3da32 (2 hours ago), 2020-01-16 18:21:16 +0000
    • Engine revision e0fe834288
    • Dart version 2.8.0 (build 2.8.0-dev.2.0 009537bbf0)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/iosdev/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling
      support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 42.1.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build
      1.8.0_202-release-1483-b49-5587405)

[✓] Connected device (1 available)
    • Phillip’s iPhone • 52a4fba45a6767b88e4dddd881201205138cac0e • ios • iOS
      13.3

• No issues found!

Answer 1

您只需要用扩展小部件包装您的 CupertinoTextField：

Container(
  child: Row(
    children: [
      FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      Expanded(
        child: CupertinoTextField(
          textInputAction: TextInputAction.done,
          keyboardType: TextInputType.text,
          onSubmitted: (value) {
            notes = value;
          },
          controller: textInput,
        ),
      ),
    ],
  )
)

尝试在 Flutter 中设置行小部件的框约束

Attempting to set the box constraints of a Row widget in Flutter

constraints

textfield

ios

dart

flutter