Question

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

IsEnabled="{Binding Path=HasItems}"

我想拆分此部分并将其移至另一个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 }文件以减少.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
}

但它没有用，第二个文件充满了错误！

拆分/缩放Flutter的最佳方法是什么

Answer 1

不要将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();
  }
}

Answer 2

在搜索并阅读给定的答案和评论后，我认为实现可伸缩性的最佳方法是为包含布局和所有相关功能的每个Widget创建单独的文件，然后将其添加到主文件中/ app，例如我编写了下面的代码来绘制一个Switch，读取它的值并将其保存在共享首选项中：

文件名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();
//...
]

如何扩展My HomePage eState

2 个答案: