使用Setter重用小部件

Dart/Flutter 的新手，不確定這是否是解決此問題的正確方法，但我想為 ElevatedButton 小部件創建一個類，我可以反復使用它，只需要設定文本和回呼（onPressed）對于 ElevatedButton 的每個實體。

現在我只是想達到可以制作小部件串列（ElevatedButtons）的地步，我可以在其中設定每個按鈕文本，但我很掙扎。這就是我所擁有的：

class AElevatedButton extends StatefulWidget
{
  AElevatedButton({Key? key}) : super(key:key);

  @override
  State<AElevatedButton> createState() => ElevatedButtonState();
}

class ElevatedButtonState extends State<AElevatedButton>
{
  String buttonText = "Button";

  void setText(String buttonText) {
    setState(() {
      this.buttonText = buttonText;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.all(5),
        child: ElevatedButton(
            onPressed: null,
            child: Text(buttonText)
        )
    );
  }
}

在我的“主頁”狀態中，我有以下但無法訪問 ElevatedButtonState 中的“setText”方法，這在某種程度上是有道理的，因為我正在創建 ElevatedButton 物件而不是 ElevatedButtonState。不確定是否有辦法獲取狀態以便我可以呼叫該方法？

class _MyHomePageState extends State<MyHomePage>
{
  AElevatedButton firstButton = new AElevatedButton();
  AElevatedButton secondButton = new AElevatedButton();

  void initiateButtons()
  {
     firstButton.setText("Button 1");    <---- error
     secondButton.setText("Button 2");    <---- error
  }

@override
  Widget build(BuildContext context) {
    initiateButtons();
    return Scaffold(
        appBar: AppBar(
            title: const Text("Test Buttons")
        ),
        body:
        Column(
            children: <Widget>[
              firstButton,
              secondButton
            ])
    );
  }
}

uj5u.com熱心網友回復：

您所做的似乎或多或少是具有您自己的自定義的現有小部件的包裝器。這在 Flutter 中很常見，實際上它是如何實作很多材質小部件的，只是設定了一組具有預定義狀態的屬性。

在您的情況下，實作您想要的正確方法是像您一樣創建一個新類，但您不需要創建設定器來更改新小部件的狀態/屬性。只需將它們傳遞到新類的建構式中，例如：

class AElevatedButton extends StatelessWidget {
  final String text;
  final VoidCallback? onTap;
  
 const AElevatedButton({required this.text,this.onTap});
  
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.all(5),
        child: ElevatedButton(
            onPressed: onTap,
            child: Text(text)
        )
    );
}}

這里只有textand onTap，但是您可以根據需要添加更多屬性，并且使用它們就像任何其他 flutter 小部件一樣：

class _MyHomePageState extends State<MyHomePage>
{

@override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
            title: const Text("Test Buttons")
        ),
        body:
        Column(
            children: <Widget>[
              AElevatedButton(text:"Button 1",onTap:testcallback1),
               AElevatedButton(text:"Button 2",onTap:testcallback2)
            ])
    );
  }
}

如果我錯過了任何一點或可以澄清更多內容，請發表評論。

uj5u.com熱心網友回復：

經過一些試驗，我得到了一個解決方案，但不確定這是否是最好的方法：

class AElevatedButton extends StatefulWidget
{
  AElevatedButton({Key? key}) : super(key:key);

  String buttonText = "Default";
  Function() cb = nothingfunc;

  @override
  State<AElevatedButton> createState() => ElevatedButtonState();
}

class ElevatedButtonState extends State<AElevatedButton>
{
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: const EdgeInsets.all(5),
        child: ElevatedButton(
            onPressed: widget.cb,
            child: Text(widget.buttonText)
        )
    );
  }
}

和主頁狀態：

AElevatedButton firstButton = new AElevatedButton();
AElevatedButton secondButton = new AElevatedButton();

void initiateButtons()
{
   firstButton.buttonText = "Button 1";
   firstButton.cb = testcallback1;
   secondButton.buttonText = "Button 2";
   secondButton.cb = testcallback2;
 }

一些雜項。為上述測驗添加的功能：

void nothingfunc()
{
}

void testcallback1()
{
  print("Button 1 pressed");
}
void testcallback2()
{
  print("Button 2 pressed");
}

標籤：扑 镖

上一篇：使用FlutterCamera包，如何將照片轉換為base64字串？

下一篇：Flutter：Firestore如何檢索屬于一個檔案的所有集合？