Flutter 将一个图标对齐到左边缘，将另一个图标对齐到右边缘

Posted 2023-02-23

【中文标题】Flutter 将一个图标对齐到左边缘，将另一个图标对齐到右边缘

【英文标题】：Flutter align one icon to the left edge, and align another icon to the right edge

【发布时间】：2022-01-16 15:26:56

【问题描述】：

我有以下代码来显示图标sort 和arrow_drop_down。 如何修改代码，让一个图标左对齐，一个图标右对齐？

  @override
  Widget build(BuildContext context) 
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          child: Row(children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ]))
    ]);
  

【问题讨论】：

这能回答你的问题吗？:***.com/questions/50365770/…

【参考方案1】：

你可以试试这段代码吗？

  Widget build(BuildContext context) 
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          right: 5.0,
          child: Row(children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ],
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          ),)
    ]);
  

【参考方案2】：

只需将 ma​​inAxisAlignment 和 crossAxisAligment 添加到您的 Row mainAxisAligment 提供对主轴的控制和对辅助轴的 crossAxisAligment 的控制。

@override
  Widget build(BuildContext context) 
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ]))
    ]);
  

另一种选择是使用 Spacer() 小部件，这会将每个元素发送到他自己的两侧

在这条路上：

@override
  Widget build(BuildContext context) 
    return Stack(children: <Widget>[
      ListView(
          controller: scrollCtrl,
          shrinkWrap: false,
          children: [_getStreamWidget()]),
      Positioned(
          left: 5.0,
          top: 5.0,
          child: Row(children: <Widget>[
            Container(
              child: IconButton(
                  icon: Icon(Icons.sort),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
 
            Spacer(),
           
            Container(
              child: IconButton(
                  icon: Icon(Icons.arrow_drop_down),
                  padding: EdgeInsets.zero,
                  constraints: BoxConstraints(),
                  onPressed: () =>
                      showFilterModal(context, list_filters, filterCallBack)),
            ),
          ]))
    ]);