隔板和容器之间的空间在颤动中 [英] space between divider and container in flutter

问题描述

分隔线没有根据我的需要进行调整，Column Widget中的所有内容都无法设置垂直线。

The divider is not adjusting as I need, All the stuff inside in Column Widget and not able to set vertical line.

 Container(
       decoration: BoxDecoration(color: Colors.grey[300]),
        child:
       Row(
         mainAxisAlignment: MainAxisAlignment.start,
         mainAxisSize: MainAxisSize.max,
         children: <Widget>[
           Expanded(child: TextFormField(
             style: new TextStyle(color: Colors.grey),
             decoration: InputDecoration(
               border: InputBorder.none,
               prefixIcon: Icon(Icons.search,color: Colors.grey,size: 30.0,),
               hintStyle: TextStyle(color: Colors.grey,fontSize: 18.0),
               hintText: 'Search',
             ),),),

           IconButton(onPressed:(){},icon: Image.asset('assets/images/grid.png',fit: BoxFit.contain ,),),
           Container(decoration: BoxDecoration(color: Colors.grey),width: 5.0,child: Text(''),),
           IconButton(onPressed:(){},icon: Image.asset('assets/images/list.png',fit: BoxFit.contain ,),),

         ],
       )),
       Divider(color: Colors.grey,),

我需要这个

I need this

并获取此

推荐答案

是的，除法器总是会填充，所以我只是使用 BoxDecoration s重新创建了想要的内容代替：

Yeah the Divider will always have padding so I just recreated what you wanted using BoxDecorations instead:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Material(
          child: Column(children: <Widget>[
        Container(
            decoration: BoxDecoration(color: Colors.grey[300]),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: TextFormField(
                    style: new TextStyle(color: Colors.grey),
                    decoration: InputDecoration(
                      prefixIcon: Icon(
                        Icons.search,
                        color: Colors.grey,
                        size: 30.0,
                      ),
                      hintStyle: TextStyle(color: Colors.grey, fontSize: 18.0),
                      hintText: 'Search',
                    ),
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                  border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
                ), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
                Container(
                  decoration: BoxDecoration(
                  border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
                ), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
              ],
            )),

      ])),
    );
  }

编辑：为清楚起见重新上传了图片，并删除了边框宽度，因此保留默认值1.0

reuploaded pic for clarity and removed width of borders so stays as default 1.0.

这篇关于隔板和容器之间的空间在颤动中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！