Flutter-通知列内的同级小部件 [英] Flutter - notify sibling widgets inside Column

问题描述

我正在尝试创建一种功能，当我单击Expanded小部件内的FlatButton时，其flex更改为 2 ，并且其他同级FlatButton s flex更改为 1 .

I'm trying to create a functionality, where when I click on a FlatButton inside an Expanded widget, its flex changes to 2 and other siblings FlatButtons flex change to 1.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new ButtonWidget(text: "Hello",selectedColor: Colors.yellow),
          new ButtonWidget(text: "This is", selectedColor: Colors.red),
          new ButtonWidget(text: "Button", selectedColor: Colors.blue),
        ],
      ),
    );
  }
}

class ButtonWidget extends StatefulWidget {
  String text;
  MaterialColor selectedColor;

  ButtonWidget({this.text, this.selectedColor});

  createState() =>
      ButtonState(text: this.text, selectedColor: this.selectedColor);
}

class ButtonState extends State<ButtonWidget> {
  String text;
  MaterialColor selectedColor;
  int _flexValue = 1;

  ButtonState({this.text, this.selectedColor});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: _flexValue,
      child: FlatButton(
        color: selectedColor,
        child: Text(
          text,
        ),
        onPressed: () {
          setState(() {
            _flexValue = 2;
          });
        },
      ),
    );
  }
}

我试图找到一种方法，也许以阵列或其他方式跟踪所有这些方法.我搜索后发现，InheritedWidget方法适用于继承的小部件，而不是兄弟姐妹.

I was trying to find a way, maybe keep track of all of them in an array or something. I searched and found that InheritedWidget approach is for inherited widgets, not siblings.

我敢肯定有一种干净的方法可以做到这一点.但是我无法动手.

I'm sure there's a clean way to do it. But just can't get my hands on it.

推荐答案

不要尝试保持按钮本身是否处于选中状态.如您所见，很难使3个按钮的状态保持同步.在小部件树的上方找到一个位置，您可以在其中维护一次该状态.在这种情况下，它在您的应用程序中.将应用设为有状态，以便它可以记住状态，然后您的按钮无需记住它.可以告诉他们在构造函数中是选择(大)还是未选择(小).

Don't try to keep the state of whether it's selected in the button itself. As you've seen it's difficult to keep the state of 3 buttons in sync. Find a place higher up the widget tree where you can maintain that state once. In this case, it's in your App. Make App stateful so that it can remember the state and then your buttons don't need to remember it. They can be told whether they are selected (big) or unselected (small) in their constructor.

那么，该按钮如何告诉父项它现在已成为选定项?有多种策略，但都涉及:

So, how does the button tell the parent that it's now become the selected one? There are various strategies, but they all involve:

• 调用已传递的方法
• 在InheritedWidget上调用方法
• 通过流发送消息
• 等

尝试一下:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          ButtonWidget(0, flexValue(0), 'Hello', Colors.yellow, onClick),
          ButtonWidget(1, flexValue(1), 'This is', Colors.red, onClick),
          ButtonWidget(2, flexValue(2), 'Button', Colors.blue, onClick),
        ],
      ),
    );
  }

  void onClick(int i) {
    setState(() {
      selected = i;
    });
  }

  int flexValue(int index) => (index == selected) ? 2 : 1;
}

class ButtonWidget extends StatelessWidget {
  ButtonWidget(this.index, this._flexValue, this.text, this.selectedColor,
      this.notifyClick);

  final Function notifyClick;
  final int index;
  final int _flexValue;
  final String text;
  final MaterialColor selectedColor;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: _flexValue,
      child: FlatButton(
        color: selectedColor,
        child: Text(
          text,
        ),
        onPressed: () {
          notifyClick(index);
        },
      ),
    );
  }
}

这篇关于Flutter-通知列内的同级小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！