flutter 有状态组件传值方式

class ShoppingList extends StatefulWidget {
  ShoppingList({Key key, this.products}) : super(key: key);

  final List<Product> products;

  // The framework calls createState the first time a widget
  // appears at a given location in the tree.
  // If the parent rebuilds and uses the same type of
  // widget (with the same key), the framework re-uses the State object
  // instead of creating a new State object.

  @override
  _ShoppingListState createState() => _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = Set<Product>();

  void _handleCartChanged(Product product, bool inCart) {
    setState(() {
      // When a user changes what's in the cart, you need to change
      // _shoppingCart inside a setState call to trigger a rebuild.
      // The framework then calls build, below,
      // which updates the visual appearance of the app.

      if (!inCart)
        _shoppingCart.add(product);
      else
        _shoppingCart.remove(product);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shopping List'),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(vertical: 8.0),
        children: widget.products.map((Product product) {
          return ShoppingListItem(
            product: product,
            inCart: _shoppingCart.contains(product),
            onCartChanged: _handleCartChanged,
          );
        }).toList(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'Shopping App',
    home: ShoppingList(
      products: <Product>[
        Product(name: 'Eggs'),
        Product(name: 'Flour'),
        Product(name: 'Chocolate chips'),
      ],
    ),
  ));
}

关键一点  widget.products

Flutter 中,子组件向父组件可以通过回调函数来实现。具体步骤如下: 1. 在父组件中定义一个回调函数,该函数的参数类型为要递的的类型。 2. 将该回调函数作为 props 递给子组件。 3. 在子组件中定义一个变量来接收父组件递过来的回调函数。 4. 在子组件中需要的地方,调用父组件递过来的回调函数,并将要递的作为参数递给它。 示例代码如下: ```dart // 父组件 class ParentWidget extends StatefulWidget { @override _ParentWidgetState createState() => _ParentWidgetState(); } class _ParentWidgetState extends State<ParentWidget> { var _count = 0; void _handleCountChanged(int newCount) { setState(() { _count = newCount; }); } @override Widget build(BuildContext context) { return ChildWidget(onCountChanged: _handleCountChanged); } } // 子组件 class ChildWidget extends StatelessWidget { final Function(int) onCountChanged; ChildWidget({required this.onCountChanged}); void _handleButtonPressed() { onCountChanged(1); } @override Widget build(BuildContext context) { return ElevatedButton( onPressed: _handleButtonPressed, child: Text('Add'), ); } } ``` 在上面的示例中,父组件 `ParentWidget` 定义了一个回调函数 `_handleCountChanged`,它接收一个 `int` 类型的参数。在父组件的 `build` 方法中,将该回调函数作为 `ChildWidget` 的 props 递给子组件。 子组件 `ChildWidget` 接收父组件递过来的回调函数,并将其保存在变量 `onCountChanged` 中。在子组件中,当用户点击按钮时,调用 `_handleButtonPressed` 方法,并将要递的参数 `1` 作为参数递给父组件的回调函数 `onCountChanged`。这样,父组件就可以根据子组件递过来的来更新自己的状态了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

computerclass

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值