使同一行中的另一个小部件可见后如何避免小部件位移？

Question

我刚开始学习 Flutter，为了练习，我正在尝试重现 iOS 联系人应用程序。在这个应用程序中，当您点击应用程序标题中的Edit 按钮时，左侧的Clear 按钮变为可见。这是我翻拍的两张截图： 红色箭头显示新按钮可用的位置。 现在，当一个新按钮可用时，“All/Missed”小部件会向右移动，因为它需要为新小部件释放一些空间。蓝色箭头显示发生位移的位置。

这是包含这些控件的 Container 的子项的内容：

child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Visibility(
            visible: _listState == ListState.EDITING,
            child: InkWell(
              child: Text("Clear",
                  style: kAppleActionButtonTextStyle),
              onTap: () {
                print("You pressed clear and eveything will be deleted");
              },
            ),
          ),
          CupertinoSegmentedControl(
            groupValue: _allOrMissedControlGroupValue,
            onValueChanged: (key) {
              print(key);
              if (key == kAllCalls) {
                setState(() {
                  _showMissingOnly = false;
                  _allOrMissedControlGroupValue = kAllCalls;
                });
              } else {
                setState(() {
                  _showMissingOnly = true;
                  _allOrMissedControlGroupValue = kMissedCalls;
                });
              }
            },
            children: {
              kAllCalls: Padding(
                child: Text(kAllCalls),
                padding: EdgeInsets.symmetric(horizontal: 10),
              ),
              kMissedCalls: Padding(
                child: Text(kMissedCalls),
                padding: EdgeInsets.symmetric(horizontal: 10),
              ),
            },
          ),
          InkWell(
            child:
                Text(_editButtonText, style: kAppleActionButtonTextStyle),
            onTap: () {
              setState(() {
                if (_listState == ListState.VIEWING) {
                  _listState = ListState.EDITING;
                } else {
                  _listState = ListState.VIEWING;
                }
                _editButtonText = editButtonText[_listState];
                getListOfCalls(_showMissingOnly, _listState);
              });
            },
          )
        ],
      ),

如何避免这种情况发生？

Answer 1

你有一些选择：

1- 为您的 Visibility 小部件添加额外的属性。

Visibility(
              maintainSize: true,
              maintainAnimation: true,
              maintainState: true,
              visible: _listState == ListState.EDITING,
              child: InkWell(
                child: Text("Clear", style: kAppleActionButtonTextStyle),
                onTap: () {
                  print("You pressed clear and eveything will be deleted");
                },
              ),
            ),

2- 使用Opacity 小部件。

Opacity(
              opacity: _listState == ListState.EDITING ? 1.0 : 0.0,
              child: InkWell(
                child: Text("Clear", style: kAppleActionButtonTextStyle),
                onTap: onTap: _listState == ListState.EDITING
                    ? () {
                        print(
                            "You pressed clear and eveything will be deleted");
                      }
                    : null
              ),
            ),