如何扩展我的HomePage eState

Question

在我的应用程序中，我有下面的代码：

class _MyHomePageState extends State<MyHomePage> {

  int _selected = 0;

List<Widget> makeRadios() {
  List <Widget> list = new List <Widget>();

  list.add(new Row(
    children: <Widget>[
      new Radio(value: 0, groupValue: _selected,
          onChanged: (int value) {
            rOnChanged(value);
          }),
      new Text('Radio 0'),
    ],
  ));
  list.add(new Row(
    children: <Widget>[
      new Radio(value: 1, groupValue: _selected,
          onChanged: (int value) {
            rOnChanged(value);
          }),
      new Text('Radio 1'),
    ],
  ));
  return list;
};

void rOnChanged(int value){
  this.setState(() {
    _selected = value;
  });

  print("value: $value");
  this._bodyHeight = (value == 1) ? 65.0 : 0.0;
}

    // and lots more lines
  }

我想分割这个部分并将t移动到另一个.dart文件，以减少main.dart文件，所以我的两个文件变成了这样：

library myLib;

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: new MyHomePage(title: 'Flutter App Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // other lines
}

另一份文件如下：

part of myLib;

int _selected = 0;

List<Widget> makeRadios() {
  List <Widget> list = new List <Widget>();

  list.add(new Row(
    children: <Widget>[
      new Radio(value: 0, groupValue: _selected,
          onChanged: (int value) {
            rOnChanged(value);
          }),
      new Text('Radio 0'),
    ],
  ));
  list.add(new Row(
    children: <Widget>[
      new Radio(value: 1, groupValue: _selected,
          onChanged: (int value) {
            rOnChanged(value);
          }),
      new Text('Radio 1'),
    ],
  ));
  return list;
};

void rOnChanged(int value){
  this.setState(() {
    _selected = value;
  });

  print("value: $value");
  this._bodyHeight = (value == 1) ? 65.0 : 0.0;
}

但是，它没有工作，第二个文件变得充满了错误！

分割/缩放颤振的最佳方法是什么？

Answer 1

在搜索和阅读给定的答案和注释之后，我认为实现可伸缩性的最佳方法是为每个Widget创建包含布局和所有相关函数的单独文件，然后将其添加到主文件/应用程序中，例如，我编写了以下代码来绘制开关、读取其值并将其保存在共享首选项中：

文件名widget.dart

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

  @override
  State<StatefulWidget> createState() => new _SwitchyState();
  }

class _SwitchyState extends State<Switchy> {
  var _value = true;

  void onchange(bool value) {
    setState(() {
      _value = value;
      _savePref(value);
    });
  }

  _savePref(value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool use = prefs.getBool('use');
    await prefs.setBool('use', value);
    print('value changed from $use to $value');
  }

  @override
  Widget build(BuildContext context) {
    return
      new Card(
      child: new Container(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text("Enable/Disable the app in the background"),
            new Switch(value: _value, onChanged: (bool value) => onchange(value)),
          ],
        ),
      ),
    );
  }
}

然后，在main.dart文件中，我将它用作：

import 'widgets.dart';
// ..

children: <Widget>[
  new Switchy();
//...
]

Answer 2

不要把State<T>和StatefulWidget分开。

如果您想要将该小部件提取到它自己的文件中，请将两个部分全部移动。

所以你可以

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:myapp/src/myapp.dart';

void main() => runApp(new MyApp());

在lib/src/myapp.dart中

// lib/src/myapp.dart
import 'package:flutter/material.dart';

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Container();
  }
}