Flutter 小部件最佳實踐：內部 Class 與 Function

Question

我是一名 Java 開發人員，目前正在學習 Flutter/Dart。 我擅長使用帶有小功能的簡潔代碼，一些小部件示例只是嚇壞了我。

我正在嘗試使用一些交易信息（價格、標題和日期）來實現 Card 小部件。 目前代碼如下所示：

class TransactionCard extends StatelessWidget {
  final Transaction _transaction;

  TransactionCard(this._transaction);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Card(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            _PriceContainer(_transaction.amount),
            _DetailContainer(_transaction.title, _transaction.date),
          ],
        ),
      ),
    );
  }
}

// Inner Widgets

class _PriceContainer extends Container {
  _PriceContainer(double amount)
      : super(
    margin: EdgeInsets.symmetric(
      vertical: 10,
      horizontal: 15,
    ),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.purple,
        width: 2,
      ),
    ),
    padding: EdgeInsets.all(10),
    child: Text(
      amount.toString(),
      style: _amountTextStyle(),
    ),
  );
}

class _DetailContainer extends Container {
  _DetailContainer(String title, DateTime date)
      : super(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          style: _titleTextStyle(),
        ),
        Text(
          date.toString(),
          style: _dateTextStyle(),
        ),
      ],
    ),
  );
}

// Text styles

TextStyle _amountTextStyle() {
  return TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 20,
    color: Colors.purple,
  );
}

TextStyle _titleTextStyle() {
  return TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 18,
  );
}

TextStyle _dateTextStyle() {
  return TextStyle(color: Colors.grey);
}

我使用了兩種方法：

1. 對於內部小部件，我擴展了 Containers 並給出了特定的樣式。
2. 對於文本 styles 我創建了一個 function 返回所需的樣式。

有沒有比另一種更好的方法？ 第三個？ 在同一個文件上創建多個小部件是否有不好的做法？

Answer 1

組成 > inheritance

正如評論和Flutter 文檔中所提到的，您應該始終編寫小部件，而不是從例如Container繼承。

在你的情況下，這看起來像這樣：

class _PriceContainer extends StatelessWidget {
  final double amount;

  const _PriceContainer({
    Key key,
    this.amount,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => Container(
        margin: const EdgeInsets.symmetric(
          vertical: 10,
          horizontal: 15,
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.purple,
            width: 2,
          ),
        ),
        padding: EdgeInsets.all(10),
        child: Text(
          amount.toString(),
          style: _amountTextStyle,
        ),
      );
}

這與您的其他小部件類似。

頂級函數

聲明頂級函數通常很好，但是，在這種情況下，您應該真正定義一個頂級屬性 - 最好聲明一個const以利用編譯時常量：

const _amountTextStyle = TextStyle(
  fontWeight: FontWeight.bold,
  fontSize: 20,
  color: Colors.purple,
);

您應該能夠將相同的內容應用於您的其他文本 styles。