无法在 Flutter 中对容器应用装饰

编程问答 2022-05-29

问题描述

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

ParentDataWidget 的错误使用。

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

enter image description here

我正在评论装饰：

enter image description here

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

解决方法

您可以只装饰 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'),],);
  }
}
,

这应该可以：

 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,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 小部件想要确定其非灵活子项的内在大小，以便它知道还剩下多少空间灵活。但是，TextField 没有固有宽度；它只知道如何将自身的大小调整到其父容器 容器的完整宽度。尝试将它包装在 Flexible 或 Expanded 中，以告诉 Row 您需要 TextField 占用剩余空间：

,

将 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'),
bordercontainersdartoutline