10

我需要将 2 个组合小部件合二为一Row：

组合的小部件被命名为“boxText”。我需要它两次，每次都在一个带有两个Texts和TextFormField类似的 Border 内：

Stack
  Image and others
  Form
    Row or Flex or Whatever:
    +------------------------------+    +------------------------------+
    | Text  Text TextFormField     |    | Text Text  TextFormField     |
    +------------------------------+    +------------------------------+

我的代码（和眼泪）：重要提示：只有在TextFormField添加时才会发生异常。

@override
Widget build(BuildContext context) {
// Composed Widget
 Widget boxText = new Container(
  decoration: new BoxDecoration(
    border: new Border.all(
      color: Colors.cyan[100],
      width: 3.0,
      style: BorderStyle.solid,
    ),
  ),
  margin: new EdgeInsets.all(5.0),
  padding: new EdgeInsets.all(8.0),
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      new Text(
        'Text',
        style: null,
      ),
      new Text(
        'Text',
        style: null,
      ),
      new TextFormField(
        decoration: const InputDecoration(
          hintText: '',
          labelText: 'label',
        ),
        obscureText: true,
      ),
    ],
  ),
);

return new Scaffold(
  key: _scaffoldKey,
  body: new Stack(
    alignment: AlignmentDirectional.topStart,
    textDirection: TextDirection.ltr,
    fit: StackFit.loose,
    overflow: Overflow.clip,
    children: <Widget>[

      new Container(
        color: Colors.red[200],
        margin: new EdgeInsets.only(
          left: MediaQuery.of(context).size.width * 0.05,
          right: MediaQuery.of(context).size.width * 0.05,
          top: MediaQuery.of(context).size.height * 0.4,
          bottom: MediaQuery.of(context).size.height * 0.1,
        ),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: new Form(
          key: _formKey,
          child: new ListView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            children: <Widget>[
              new Flex(
                direction: Axis.horizontal,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  boxText,
                  boxText,
                ],
              ),
            ],
          ),
        ),
      ),
    ],
  ),
    );
  }

如果可能的话，如何在没有以下情况下使这些小部件工作：

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞══

The following assertion was thrown during performLayout():

An InputDecorator, which is typically created by a TextField, cannot 
have an unbounded width.

This happens when the parent widget does not provide a finite width 
constraint. For example, if the InputDecorator is contained by a Row, 
then its width must be constrained. An Expanded widget or a SizedBox 
can be used to constrain the width of the InputDecorator or the 
TextField that contains it.

'package:flutter/src/material/input_decorator.dart':

Failed assertion: line 945 pos 7: 'layoutConstraints.maxWidth < 
double.infinity'
4

4 回答 4

14

Container将您的和TextFormField内部的小部件都包裹起来Flexible。

在此处输入图像描述

Widget boxText = new Flexible(child: new Container(
      decoration: new BoxDecoration(
        border: new Border.all(
          color: Colors.cyan[100],
          width: 3.0,
          style: BorderStyle.solid,
        ),
      ),
      margin: new EdgeInsets.all(5.0),
      padding: new EdgeInsets.all(8.0),
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[

          new Text(
            'Text',
            style: null,
          ),
          new Text(
            'Text',
            style: null,
          ),
          new Flexible (child: new TextFormField(
            decoration: const InputDecoration(
              hintText: '',
              labelText: 'label',
            ),
            obscureText: true,
          ),),
        ],
      ),
    ));
于 2017-11-16T22:17:41.120 回答
4

问题是您的 Container 依靠其父级来决定其宽度。因为它没有父节点，所以它是无限宽的。

为了解决这个问题，给它一个父母告诉它的孩子如何处理宽度。一个灵活的或扩展的就是这样做的。Expanded 告诉它的孩子尽可能大（展开），而 Flexible 告诉它的孩子尽可能小（缩小）。

在我看来，Expanded 是你最好的选择：

更改您的代码：

// Composed Widget
Widget boxText = new Container(
  decoration: new BoxDecoration(
  // all your other code here
);

至

// Composed Widget
Widget boxText = Expanded(   // <-- Add this Expanded widget
  child: new Container(
    decoration: new BoxDecoration(
    // all your other code here
  ),
);
于 2019-01-29T18:51:29.477 回答
0

Row和Column第一个固定大小的布局小部件。固定大小的小部件被认为是不灵活的，因为它们在布局后无法自行调整大小。

flexflex在确定每个灵活小部件接收的总剩余空间的比例之前，将自身与其他属性进行比较。

当flex属性相互比较时，它们的弹性值之间的比率决定了每个灵活小部件接收的总剩余空间的比例。

remainingSpace * (flex / totalOfAllFlexValues)

在此示例中，flex值 (2) 的总和确定两个Flexible小部件接收总剩余空间的一半。BlueBox小部件（或固定大小的小部件）保持相同的大小。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        BlueBox(),
        Flexible(
          fit: FlexFit.tight,
          flex: 1,
          child: BlueBox(),
        ),
        Flexible(
          fit: FlexFit.tight,
          flex: 1,
          child: BlueBox(),
        ),
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}
于 2021-04-28T11:17:01.380 回答
-2 
         child: Row(
                children: <Widget>[
                  Expanded(
                    child: TextField(

                      decoration: InputDecoration(hintText: "text"),
                    ),
                  ),
                  Text("unit"),
                ],
              )),
于 2019-12-23T08:06:04.487 回答