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

Question

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

这是包含这些控件的容器的子项的内容:

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