flutter - 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: "جستجو",
            ),
          ),
        ],
      ),
    );
  }
}

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

标签： fluttersearchflutter-layoutflutter-dependencies

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: "جستجو",
              ),
            ),
          ),
        ],
      ),
    );
  }
}