如何让孩子在颤动中适应连续的高度？

Question

我有一个Row带有输入文件和搜索按钮的小部件。行位于列内。

如何使搜索按钮适合行的高度，使按钮大小等于输入字段的高度？

我尝试添加crossAxisAlignment: CrossAxisAlignment.stretch,到行但收到错误：-

BoxConstraints forces an infinite height.

我没有输入字段的高度。并且不想对按钮的高度进行硬编码，因为它应该始终与输入框的高度匹配。

此外，将高度分配给行并添加CrossAxisAlignment.stretch不会更改输入字段的高度，唯一的按钮正在更改。

这里有什么问题以及如何解决这个问题？

Row(
  // crossAxisAlignment: CrossAxisAlignment.stretch,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(
      child: Container(
        child: TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: 'search',
            hintStyle:
                Theme.of(context).textTheme.bodyText2.copyWith(
                  color: Theme.of(context).accentColor,
                ),
            contentPadding: EdgeInsets.symmetric(
              vertical: 8, horizontal: 20
            ),
            fillColor: Theme.of(context).primaryColor,
            filled: true,
          ),
          style: Theme.of(context).textTheme.bodyText2,
        ),
      ),
    ),
    FlatButton(
      onPressed: () {},
      color: Colors.grey,
      child: Icon(
        Icons.search,
      ),
    ),
  ],
)

Answer 1

您可以将行包装在IntrinsicHeight带有Rowa crossAxisAlignmentof的 中CrossAxisAlignment.strech。例如：

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [TextField(..), TextButton(..)],
  ),
),

Answer 2

Container我有同样的要求 - 我想在 的末尾有正方形TextField。但由于文本大小和文本输入高度可能会随着时间的推移而改变，我不想对其大小进行硬编码。

一种解决方案是简单地使用suffixIcononTextField作为文本输入的一部分（红色方块）。

就我而言，我必须Widget在TextField. 这里的关键是使用：

1. IntrinsicHeight作为Row家长
2. AspectRatio1 作为Container（灰色方块）的父级。

参见代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo Home Page'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            IntrinsicHeight(
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      textAlignVertical: TextAlignVertical.center,
                      decoration: InputDecoration(
                        hintText: "Search...",
                        filled: true,
                        fillColor: Colors.blueGrey,
                        border: InputBorder.none,
                        prefixIcon: const Icon(
                          Icons.search,
                          color: Colors.white,
                        ),
                        suffixIcon: Container(
                          color: Colors.red,
                          child: const Icon(
                            Icons.close,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ),
                  ),
                  AspectRatio(
                    aspectRatio: 1,
                    child: GestureDetector(
                      onTap: () {
                        // handle on tap here
                      },
                      child: Container(
                        color: Colors.grey,
                        child: const Icon(
                          Icons.clear,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

并参见图像。

请注意，我在这个 SO 答案中找到了这个解决方案的灵感。

Answer 3

我可以给你一个主意。
将FlatButton太包裹在 内Container，并定义它们的宽度和高度。像这样的事情，

    Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: MediaQuery.of(context).size.width * 0.8,
              color: Theme.of(context).primaryColor,
              height: 50.0,
              child: TextField(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'search',
                  hintStyle: Theme.of(context).textTheme.bodyText2.copyWith(
                        color: Theme.of(context).accentColor,
                      ),
                  contentPadding:
                      EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                  filled: true,
                ),
                style: Theme.of(context).textTheme.bodyText2,
              ),
            ),
            Container(
              height: 50.0,
              width: MediaQuery.of(context).size.width * 0.2,
              child: FlatButton(
                onPressed: () {},
                color: Colors.grey,
                child: Icon(
                  Icons.search,
                ),
             ),
           ),
       ],
    )

否则，至少定义heightand widthforFlatButton并保留TextFieldto be Expanded。

希望有效！