Flutter开发问题：如何将筛选图标置于Row组件末尾？

我懂你遇到的困扰——想把MdiIcons.filterOutline这个筛选图标放在搜索栏Row组件的最末尾，试了MainAxisAlignment.end却没达到预期效果对吧？这是因为你当前的布局结构里，嵌套的小Row并没有占据外层Row的剩余空间，所以它的MainAxisAlignment.end只能让图标在自己的小范围内靠右，而不是整个搜索栏的右侧。

给你几个简单有效的解决方案：

方案1：用Spacer()占据剩余空间 #

在外层Row的文本和筛选图标之间添加一个Spacer()组件，它会自动填充两者之间的所有可用空间，直接把筛选图标推到最右侧：

SearchBar return InkWell(
  onTap: () {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Search"),
    ));
    print("Search");
  },
  child: Container(
    margin: EdgeInsets.only(left: 24.0, right: 24.0, top: 16.0),
    height: widget.height,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(6.0),
        color: Colors.white,
        boxShadow: <BoxShadow>[
          BoxShadow(color: Colors.black12, blurRadius: 8.0)
        ]),
    child: Container(
      margin: EdgeInsets.only(left: 6.0, right: 6.0),
      child: Row(
        children: <Widget>[
          IconButton(
              icon: Icon(Icons.menu, color: Colors.black54),
              onPressed: () {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text("Menu"),
                ));
                print("Menu");
              }),
          Text(widget.text, style: TextStyle(
              fontFamily: "Roboto",
              color: Colors.black26,
              fontSize: 16.0)),
          // 添加这个Spacer，把图标挤到最右边
          Spacer(),
          Icon(MdiIcons.filterOutline, color: Colors.black54),
        ],
      ),
    ),
  ),
);

方案2：用Expanded包裹嵌套Row #

如果你想保留嵌套Row的结构，可以给它套上Expanded，让它占据外层Row的剩余空间，这样内部的MainAxisAlignment.end就能生效：

SearchBar return InkWell(
  onTap: () {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Search"),
    ));
    print("Search");
  },
  child: Container(
    margin: EdgeInsets.only(left: 24.0, right: 24.0, top: 16.0),
    height: widget.height,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(6.0),
        color: Colors.white,
        boxShadow: <BoxShadow>[
          BoxShadow(color: Colors.black12, blurRadius: 8.0)
        ]),
    child: Container(
      margin: EdgeInsets.only(left: 6.0, right: 6.0),
      child: Row(
        children: <Widget>[
          IconButton(
              icon: Icon(Icons.menu, color: Colors.black54),
              onPressed: () {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text("Menu"),
                ));
                print("Menu");
              }),
          Text(widget.text, style: TextStyle(
              fontFamily: "Roboto",
              color: Colors.black26,
              fontSize: 16.0)),
          // 用Expanded包裹嵌套Row，让它占满剩余空间
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Icon(MdiIcons.filterOutline, color: Colors.black54)
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);

方案3：给外层Row设置MainAxisAlignment.spaceBetween #

如果你的搜索栏里只有菜单按钮、提示文本、筛选图标这三个元素，直接给外层Row设置mainAxisAlignment: MainAxisAlignment.spaceBetween也能快速实现需求，它会让元素均匀分布在Row的两端和中间：

SearchBar return InkWell(
  onTap: () {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Search"),
    ));
    print("Search");
  },
  child: Container(
    margin: EdgeInsets.only(left: 24.0, right: 24.0, top: 16.0),
    height: widget.height,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(6.0),
        color: Colors.white,
        boxShadow: <BoxShadow>[
          BoxShadow(color: Colors.black12, blurRadius: 8.0)
        ]),
    child: Container(
      margin: EdgeInsets.only(left: 6.0, right: 6.0),
      // 给外层Row添加这个属性
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
              icon: Icon(Icons.menu, color: Colors.black54),
              onPressed: () {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text("Menu"),
                ));
                print("Menu");
              }),
          Text(widget.text, style: TextStyle(
              fontFamily: "Roboto",
              color: Colors.black26,
              fontSize: 16.0)),
          Icon(MdiIcons.filterOutline, color: Colors.black54),
        ],
      ),
    ),
  ),
);

这三个方案里，方案1是最简洁的，推荐优先尝试～

内容的提问来源于stack exchange，提问作者user10408704