dart 在摆动中分隔器与容器之间的空间

c9qzyr3d 于 2023-09-28 发布在其他

关注(0)|答案(4)|浏览(94)

分隔符没有调整，因为我需要，所有的东西里面列小部件，不能设置垂直线。

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

我需要这个

得到这个

dart

来源：https://stackoverflow.com/questions/54362181/space-between-divider-and-container-in-flutter

4条答案

按热度按时间

zf9nrax11#

只要给予分隔线一个高度1。

Divider(height: 1)

这将删除它的任何填充。

完整代码如下：

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

赞(0）回复(0）举报 2023-09-28

des4xlb02#

只需删除分隔符替换为这一行

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

并设置列

crossAxisAlignment: CrossAxisAlignment.stretch,

赞(0）回复(0）举报 2023-09-28

vq8itlhq3#

是的，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。

赞(0）回复(0）举报 2023-09-28

xurqigkl4#

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

赞(0）回复(0）举报 2023-09-28