无法对 Flutter 中的 Container 应用装饰

Question

将边框应用到我的容器后，它消失并出现以下错误：

Incorrect use of ParentDataWidget.

评论装修后。呈现小部件。但我需要像这样给出轮廓边框：

我正在评论装饰：

  Container(
    child: Row(
      children: [
        Container(

          // commenting this line fixes the issue
          decoration: BoxDecoration( borderRadius: BorderRadius.circular(10) ),
          child: Expanded(
            child: Row(
              children: [
                Icon(LineAwesomeIcons.search),
                Expanded(
                  child: TextField(
                    decoration: null,
                    minLines: 1,
                    maxLines: 2,

                    controller: pickupController,
                    onChanged: (val) {

                    },
                  ),
                ),
                Icon(LineAwesomeIcons.times),
              ],
            ),
          ),
        ),
        SizedBox(width: 20,),
        Text('Map'),
      ],
    ),
  )

Answer 1

您可以只装饰 TextField。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: <Widget>[
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                  prefixIcon: const Icon(Icons.search),
                  suffixIcon: const Icon(Icons.close),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: const BorderSide(
                      color: Colors.grey,
                      width: 1,
                    ),
                  ),
                ),
              ),
            ),
            FlatButton(
              onPressed: () {},
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              visualDensity: VisualDensity.compact,
              child: const Text('Map'),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

这应该可以完成工作：

 Row(
              children: [
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextField(
                      controller: controller,
                      decoration: InputDecoration(
                        prefixIcon: Icon(
                          Icons.search,
                          color: Colors.black,
                        ),
                        suffixIcon: IconButton(
                          icon: Icon(
                            Icons.close,
                            color: Colors.black,
                          ),
                          onPressed: () {
                            //TODO: implement functionality here.
                          },
                        ),
                        border: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.black.withOpacity(
                              0.1,
                            ),
                          ),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    ),
                  ),
                ),
                Text(
                  "Map",
                  style:
                      TextStyle(fontWeight: FontWeight.w400, fontSize: 25),
                )
              ],
            ),

你哪里错了：

Row 小部件想要确定其非灵活 children 的 intrinsic 大小所以它知道它为灵活留下了多少space。但是，TextField 没有固有宽度；它只知道如何将自己的大小调整到其 parent container 的完整 width。尝试 wrapping 它在 Flexible 或 Expanded 中告诉 Row 您希望 TextField 占用剩余的 space:

Answer 3

将 width 尺寸添加到第二个 Container 然后将 border: Border.all() 添加到 BoxDecoration

Container(
                  child: Row(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.width,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8.0),
                          border: Border.all(),
                        ),
                        child: Expanded(
                          child: Row(
                            children: [
                              Icon(Icons.search),
                              Expanded(
                                child: TextField(
                                  decoration: null,
                                  minLines: 1,
                                  maxLines: 2,
                                  onChanged: (val) {},
                                ),
                              ),
                              Icon(Icons.clear),
                            ],
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 20,
                      ),
                      Text('Map'),
                    ],
                  ),
                ),

无法对 Flutter 中的 Container 应用装饰

Cannot apply decoration to Container in Flutter

containers

border

outline

dart

flutter