Flutter - SwitchListTile - DRY 代码

Question

完全的新手，所以请耐心等待。只是一个关于如何使用 DRY 原则重构我的代码的问题。我确信它可以在这样一个简单的例子中完成，所以这里是……我下面的代码显示了三个“switchListTiles”。我已经设法弄清楚如何在彼此之上创建 3 个 switchListTiles，以及如何让它们单独打开/关闭。只是这意味着我要创建以下函数 3 次：

bool _value3 = false;

void _onChanged3(bool value3) {
    setState(() {
      _value3 = value3;
    });
  }

我确信有一种方法可以更改它，这样我就不会重复使用相同的代码了。 任何帮助将不胜感激 非常感谢提前

    import 'package:flutter/material.dart';

    void main() {
      runApp(new MaterialApp(
        title: "Switch Widget Demo",
        home: new MyApp(),
      ));
    }

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

    class _MyAppState extends State<MyApp> {

      bool _value = false;

      void _onChanged(bool value) {
        setState(() {
          _value = value;
        });
      }

      bool _value2 = false;

      void _onChanged2(bool value2) {
        setState(() {
          _value2 = value2;
        });
      }

      bool _value3 = false;

      void _onChanged3(bool value3) {
        setState(() {
          _value3 = value3;
        });
      }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Switch Demo"),
        backgroundColor: Colors.redAccent,
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(32.0),
        child: Column(
          children: <Widget>[

            Switch(value: _value,
              onChanged: (bool value) {_onChanged(value);}),
            SwitchListTile(value: _value,
              title: Text("Click Me"),
              activeColor: Colors.red,
              secondary: Icon(Icons.home),
              subtitle: Text("For my small print"),
              onChanged: (bool value) {_onChanged(value);}),

            SwitchListTile(value: _value2,
                title: Text("Click Me Again Please"),
                activeColor: Colors.lightGreen,
                secondary: Icon(Icons.perm_identity),
                onChanged: (bool value2) {_onChanged2(value2);}),

            SwitchListTile(value: _value3,
                title: Text("And Again Please"),
                activeColor: Colors.blueGrey,
                subtitle: Text("Some more small print"),
                secondary: Icon(Icons.person),
                onChanged: (bool value) {_onChanged3(value);}),


          ],
        ),
      ),
    );
  }
}

Answer 1

您只需将SwitchListTiles 重构为其单独的类，然后在父窗口小部件中创建List<SwitchListTiles>。

在这里，我用较少的代码创建了 20 个：

class MySwitchListTilesContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      body: ListView(
        children: List.generate(20, (i)=>MySwitchListTile(

        )),
      ),
    );
  }
}
class MySwitchListTile extends StatefulWidget {

  @override
  _MySwitchListTileState createState() => new _MySwitchListTileState();
}

class _MySwitchListTileState extends State<MySwitchListTile> {
  bool _v = false;
  @override
  Widget build(BuildContext context) {
    return  SwitchListTile(
      value:_v,
      onChanged: (value)=>setState((){
        _v=value;
      }),

    );
  }
}