分隔器和容器之间的空间颤动

Question

分隔线没有按照我的需要进行调整，列小部件中的所有内容都无法设置垂直线。

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

我需要这个

得到这个

Answer 1

只需给1分隔线一个高度。

Divider(height: 1)

这将删除它的任何填充。

简单的解决方案：完美无缺

完整代码如下：

ListView.separated(
     itemCount: 10,
     separatorBuilder: (_ , __ ) => Divider(height:1),
     itemBuilder: (BuildContext context, int index) {
       return ListTile(
         title: Text('item $index'),
       );
     },
);

Answer 2

只需删除分隔线替换此行

      Container(color: Colors.grey, height: 1)

并设置列

    crossAxisAlignment: CrossAxisAlignment.stretch,

Answer 3

是的，Divider它将始终有填充，所以我只是使用BoxDecorations重新创建了您想要的内容：

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。

Answer 4

根据高度自动计算适当的填充。因此，将分隔线的高度设置为 0 将删除填充。