Flutter 訪問另一個小部件中的小部件變量

Question

我無法完成從另一個widget訪問stateless widget的簡單屬性...

Class Month ：

class Month {
  final String name;
  const Month(this.name);
}

MonthCardWidget ：

class MonthCardWidget extends StatelessWidget {
  final Month month;

  const MonthCardWidget({Key key, this.month}) : super(key: key); 
  ...

在我的有狀態小部件中：

  final List months = [
    MonthCardWidget(month: Month('January')),
    MonthCardWidget(month: Month('February')),
    MonthCardWidget(month: Month('March')),
    MonthCardWidget(month: Month('April')),
    MonthCardWidget(month: Month('May')),
    MonthCardWidget(month: Month('Juni')),
    MonthCardWidget(month: Month('Juli')),
    MonthCardWidget(month: Month('August')),
    MonthCardWidget(month: Month('September')),
    MonthCardWidget(month: Month('October')),
    MonthCardWidget(month: Month('November')),
    MonthCardWidget(month: Month('December')),
  ];

我嘗試訪問這樣的name ：

months[index].month.name

但這不起作用......我在這里錯過了什么？

Answer 1

列出Month模型而不是小部件不是更容易嗎？

Answer 2

我認為您想要的是 state 管理解決方案。 為此，您可以使用提供程序或 GetX 等軟件包。 我個人最喜歡的是 GetX Package。 您只需要創建一個 class 來放置您想要全局訪問的列表、變量...，然后使用 controller 調用它們。 有關詳細文檔，請查看 pub.dev 上的 package

https://pub.dev/packages/get

祝你好運： ：）

Answer 3

從其祖先訪問 Widget 的屬性可能是個壞主意。 數據流向另一個方向。 使用 State 管理是圍繞小部件樹管理/共享數據的好方法。 查看State 管理包的精選列表。 我個人最喜歡的是Riverpod （一個新的 package 來自與 Provider 包相同的作者）。

對於您的特定情況，我什至不確定您是否需要Month class 和List<MonthCardWidget> months 。 月份只是從 1 到 12 的數字。

您的輪子的children可以生成為List ：

ClickableListWheelScrollView(
  [...]
  child: ListWheelScrollView(
    [...]
    children: List.generate(12, (index) => MonthCardWidget(month: index + 1)),
  ),
);

然后，您的MonthCardWidget只收到一個int month並顯示月份名稱，這要歸功於intl package ，免費為您提供 i18n：

class MonthCardWidget extends StatelessWidget {
  final int month;

  const MonthCardWidget({Key key, this.month}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber.shade300,
      child: Center(
        child: Text(DateFormat.MMMM().format(DateTime(2000, month))),
      ),
    );
  }
}

---

完整的源代碼

import 'package:clickable_list_wheel_view/clickable_list_wheel_widget.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Calendar Wheel Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MyListWheel(),
    );
  }
}

class MyListWheel extends StatefulWidget {
  @override
  _MyListWheelState createState() => _MyListWheelState();
}

class _MyListWheelState extends State {
  final _scrollController = FixedExtentScrollController(initialItem: 11);

  @override
  Widget build(BuildContext context) {
    final double _itemHeight = MediaQuery.of(context).size.height / 3;

    return ClickableListWheelScrollView(
      scrollController: _scrollController,
      itemHeight: _itemHeight,
      itemCount: 12,
      scrollOnTap: true,
      child: ListWheelScrollView(
        controller: _scrollController,
        itemExtent: _itemHeight,
        physics: FixedExtentScrollPhysics(),
        diameterRatio: 3,
        squeeze: 0.95,
        children:
            List.generate(12, (index) => MonthCardWidget(month: index + 1)),
      ),
    );
  }
}

class MonthCardWidget extends StatelessWidget {
  final int month;

  const MonthCardWidget({Key key, this.month}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber.shade300,
      child: Center(
        child: Text(DateFormat.MMMM().format(DateTime(2000, month))),
      ),
    );
  }
}