Row 内的 TextField 破坏了代码

Question

我正在尝试制作自定义搜索小部件。当我在 Row 中添加 TextField 时，它破坏了代码。

我的代码没有 TextField。

import 'package:flutter/material.dart';

class SearchWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.yellowAccent,
        borderRadius: BorderRadius.circular(500),
      ),
      child: Row(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.circular(500),
            ),
            child: IconButton(icon: Icon(Icons.search), onPressed: () {}),
          ),
        ],
      ),
    );
  }
}

但添加 TextField 后一切都会发生。

我的代码在 Row 中包含 TextField。

import 'package:flutter/material.dart';

class SearchWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.yellowAccent,
        borderRadius: BorderRadius.circular(500),
      ),
      child: Row(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.circular(500),
            ),
            child: IconButton(icon: Icon(Icons.search), onPressed: () {}),
          ),
          TextField(
            decoration: InputDecoration(
              labelText: "جستجو",
            ),
          ),
        ],
      ),
    );
  }
}

我在其他情况下也遇到过这个问题，我认为是行和列的问题。

Answer 1

试试这个方法

您需要将 TextField 包裹在 Expanded 小部件中

class SearchWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.yellowAccent,
        borderRadius: BorderRadius.circular(500),
      ),
      child: Row(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.circular(500),
            ),
            child: IconButton(icon: Icon(Icons.search), onPressed: () {}),
          ),
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                labelText: "جستجو",
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

我认为您甚至不需要 Container 来创建一个圆形矩形文本字段，因为 textField 具有 enableBorder、disableBorder 和 border 作为其属性以使其边框为圆形，并且您可以 suffix/prefix IconButton对于搜索实现，但如果你想用容器实现它，我有一个类似的代码：

 Row(
            children: [
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(24)),
                  child: TextFormField(
                    autovalidate: true,
                    autocorrect: true,
                    textInputAction: TextInputAction.search,
                    onFieldSubmitted: (val) {
                      _search();
                    },
                    onChanged: (val) {
                     // Your Code
                    },
                    controller: _controller,
                    decoration: InputDecoration(
                        hintText: 'Search',
                        contentPadding: const EdgeInsets.only(left: 24.0),
                        border: InputBorder.none),
                  ),
                ),
              ),
              IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    _search();
                  })
            ],
          ),

如果您需要 TextField 圆形边框代码，请告诉我，我们很乐意为您提供帮助

Row 内的 TextField 破坏了代码

TextField inside of Row it broke the code

search

flutter

flutter-dependencies

flutter-layout