如何在Flutter中让子元素适应行高？

Question

我有一个带有输入文件和搜索按钮的 Row 组件。而这个 Row 组件又在一个 Column 组件中。

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

我尝试将crossAxisAlignment: CrossAxisAlignment.stretch,添加到行中，但出现错误：BoxConstraints强制使用无限高度。

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

此外，将高度分配给行并添加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,
      ),
    ),
  ],
)

- rahul Kushwaha

Answer 1

您可以将行包装在具有 crossAxisAlignment 为 CrossAxisAlignment.strech 的 IntrinsicHeight 中。例如：

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

- masterwok

Answer 2

我有同样的需求 - 我想在TextField的末尾放置一个正方形Container。但是由于文本大小以及文本输入高度可能随时改变，因此我不想硬编码其大小。

一种解决方案是简单地在文本输入框(红色正方形)中使用TextField的suffixIcon。

在我的情况下，我不得不在TextField之外使用额外的Widget。关键在于使用：

1. Row作为父级元素时使用IntrinsicHeight
2. 1:1比例的AspectRatio 作为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答案中找到了这种解决方案的灵感。

- Matej Hlatky

---

这应该被接受作为答案，因为您并不能总是设置一个固定的高度。 - Andrea Zanini

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,
                ),
             ),
           ),
       ],
    )

否则，至少为 FlatButton 定义 height 和 width ，并将 TextField 保留为 Expanded 。

希望这能解决问题！

- Shri Hari L

---

它不起作用了，按钮的高度没有改变，但宽度不是总宽度的一半。 - rahul Kushwaha

排序，高度50几乎是输入大小的完美猜测，但如果您指定高度为50以外的数字，比如100，我们就会遇到同样的问题。 - rahul Kushwaha

Answer 4

为了使 Button 的高度始终与 TextField 相同，最好将 Row 小部件包装在一个具有固定高度的 Container 中，并将 Button 与一个具有 double.infinity 高度的 Container 包装起来：

Container(
  height: 48,
  child: 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,
          ),
        ),
      ),
      Container(
        height: double.infinity,
        child: FlatButton(
          onPressed: () {},
          color: Colors.grey,
          child: Icon(
            Icons.search,
          ),
        ),
      ),
    ],
  ),
);

- J. S.

---

你会给Row()什么高度？在这里，你必须猜测Input Box的高度。 - rahul Kushwaha