flutter可允許的小部件變量依賴性

Question

編輯：修復它。向下看

老問題：

我正在試驗Dismissible小部件。 我可以成功監視該方向的狀態，該狀態存儲在directionVar中。 它輸出類似於DismissDirection.endToStart

我想使用此信息來更改顯示的圖標的位置。 刪除項目時，背景為紅色，右側為圖標。 Gmail之類的樣式。

Widget build(BuildContext context) {
        DismissDirection directionVar;
        return ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return Dismissible(
              key: Key(products[index]['title']), //Should be unique.
              onDismissed: (DismissDirection direction) {
                directionVar = direction;
              },

我的問題是這部分：

              background: Container(
                 color: Colors.red,
                padding: EdgeInsets.only(left: 20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Icon(
                      Icons.delete,
                    )
                  ],
                ),
              ),);});}

我希望此部分根據directionVar值進行更改。 padding應該根據directionVar的值以及mainAxisAlignment 。

遵循以下原則：

        if(directionVar == DismissDirection.endToStart){

        } else if (directionVar == DismissDirection.startToEnd){

        }

但是我無法訪問這些語句中的background ：和padding屬性，因為它們是Dismissible小部件的屬性，並且無法在onDismissed(){}更改

這看似簡單的問題，但似乎無法解決。

編輯：修復它。。非常簡單。

   secondaryBackground: Container(
        color: Colors.red,
        padding: EdgeInsets.only(right: 20.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(
              Icons.delete,
            )
          ],
        ),
      ),

Answer 1

有幾種方法可以實現此目的。 例如，您可以創建一種方法來動態處理方向，然后在小部件樹中相應地對其進行更新。 就像是

    List<dynamic> _resolveDirection(DismissDirection direction) {

    switch (direction) {
        case DismissDirection.endToStart:
          return [MainAxisAlignment.center, 20.0];
          break;
        case DismissDirection.startToEnd:
          return [MainAxisAlignment.start, 10.0];
          break;
        case DismissDirection.vertical:
          return [MainAxisAlignment.end, 5.0];
          break;
        // And so on...
        default:
          return [];
      }
    }

然后用

 background: Container(
                 color: Colors.red,
                padding: _resolveDirection(directionVar)[1],
                child: Row(
                  mainAxisAlignment: _resolveDirection(directionVar)[0],
                  children: <Widget>[
                    Icon(
                      Icons.delete,
                    )
                  ],
                ),
              ),);});}

最后，每次滑動時您所要做的就是以更新的方向重建樹

setState(() => directionVar = direction);