代码之家 › 专栏 › 技术社区 › Farhana Naaz Ansari Jay Dwivedi

分流器与容器在颤振中的间距

flutter dart android

Farhana Naaz Ansari Jay Dwivedi · 技术社区 · 6 年前

分隔符没有根据需要进行调整,列小部件中的所有内容都无法设置垂直线。

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

我需要这个

得到这个

2 回复 | 直到 6 年前

soupjake 6 年前

是的 Divider 总是有填充,所以我只是用 BoxDecoration 而是:

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。

Govaadiyo 6 年前

只需拆下分隔器,用这根线替换

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

设柱

    crossAxisAlignment: CrossAxisAlignment.stretch,