Question

分隔线没有根据我的需要进行调整，Column 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(
               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

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

Answer 3

是的，Divider总是带有填充，所以我只是使用BoxDecoration s重新创建了您想要的内容：

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

只需删除分隔线，请替换为此行

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

并设置列

    crossAxisAlignment: CrossAxisAlignment.stretch,

隔板和容器之间的空间在颤动中

4 个答案: