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

c9qzyr3d  于 2023-09-28  发布在  其他
关注(0)|答案(4)|浏览(135)

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

  1. Container(
  2. decoration: BoxDecoration(color: Colors.grey[300]),
  3. child:
  4. Row(
  5. mainAxisAlignment: MainAxisAlignment.start,
  6. mainAxisSize: MainAxisSize.max,
  7. children: <Widget>[
  8. Expanded(child: TextFormField(
  9. style: new TextStyle(color: Colors.grey),
  10. decoration: InputDecoration(
  11. border: InputBorder.none,
  12. prefixIcon: Icon(Icons.search,color: Colors.grey,size: 30.0,),
  13. hintStyle: TextStyle(color: Colors.grey,fontSize: 18.0),
  14. hintText: 'Search',
  15. ),),),
  16. IconButton(onPressed:(){},icon: Image.asset('assets/images/grid.png',fit: BoxFit.contain ,),),
  17. Container(decoration: BoxDecoration(color: Colors.grey),width: 5.0,child: Text(''),),
  18. IconButton(onPressed:(){},icon: Image.asset('assets/images/list.png',fit: BoxFit.contain ,),),
  19. ],
  20. )),
  21. Divider(color: Colors.grey,),

我需要这个

得到这个

zf9nrax1

zf9nrax11#

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

  1. Divider(height: 1)

这将删除它的任何填充。

完整代码如下:

  1. ListView.separated(
  2. itemCount: 10,
  3. separatorBuilder: (_ , __ ) => Divider(height:1),
  4. itemBuilder: (BuildContext context, int index) {
  5. return ListTile(
  6. title: Text('item $index'),
  7. );
  8. },
  9. );
展开查看全部
des4xlb0

des4xlb02#

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

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

并设置列

  1. crossAxisAlignment: CrossAxisAlignment.stretch,
vq8itlhq

vq8itlhq3#

是的,Divider总是有填充,所以我只是用BoxDecoration s重新创建了你想要的东西:

  1. Widget build(BuildContext context) {
  2. return Scaffold(
  3. appBar: AppBar(
  4. title: Text('Home'),
  5. ),
  6. body: Material(
  7. child: Column(children: <Widget>[
  8. Container(
  9. decoration: BoxDecoration(color: Colors.grey[300]),
  10. child: Row(
  11. mainAxisAlignment: MainAxisAlignment.start,
  12. mainAxisSize: MainAxisSize.max,
  13. children: <Widget>[
  14. Expanded(
  15. child: TextFormField(
  16. style: new TextStyle(color: Colors.grey),
  17. decoration: InputDecoration(
  18. prefixIcon: Icon(
  19. Icons.search,
  20. color: Colors.grey,
  21. size: 30.0,
  22. ),
  23. hintStyle: TextStyle(color: Colors.grey, fontSize: 18.0),
  24. hintText: 'Search',
  25. ),
  26. ),
  27. ),
  28. Container(
  29. decoration: BoxDecoration(
  30. border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
  31. ), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
  32. Container(
  33. decoration: BoxDecoration(
  34. border: Border(bottom: BorderSide(color: Theme.of(context).hintColor), left: BorderSide(color: Theme.of(context).hintColor)),
  35. ), child: IconButton(icon: Icon(Icons.view_list), onPressed: () {},)),
  36. ],
  37. )),
  38. ])),
  39. );
  40. }

编辑:重新上传图片,以清晰和删除宽度的边界,使停留为默认值1.0。

展开查看全部
xurqigkl

xurqigkl4#

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

相关问题