Question

希望你一切顺利！

我只是想知道，在 Flutter 中切换小部件的最佳方式是什么？例如，假设我问用户 5 个问题。在问题之间移动的最佳方式是什么？我应该为每个问题制作一个单独的屏幕并在它们之间导航，保留问题索引并使用 switch 语句返回不同的问题，还是有更好更简洁的方法？

我目前正在使用 index & switch 语句方法，这基本上就是我的代码的样子：

int questionIndex = 0;

Widget getQuestion(int index) {
  Widget questionWidget;
  switch (questionIndex) {
    case 0:
      questionWidget = Question0;
      break;
    case 1:
      questionWidget = Question1;
      break;
    ...
    default:
      questionWidget = Question0;
      break;
  }
  return questionWidget;
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: kLightGrey,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(25.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              getQuestion(questionIndex),
              MaterialButton(
                child: Text('Next'),
                onPressed: () {
                  questionIndex++;
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您还可以使用 PageView 小部件在转到下一个/上一个问题时添加滑动手势和动画。

class MyHomePage extends StatelessWidget {
  final PageController _controller = PageController();

  @override
  Widget build(BuildContext context1) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _controller,
              children: const [
                Center(child: Text('Question 1')),
                Center(child: Text('Question 2')),
                Center(child: Text('Question 3')),
                Center(child: Text('Question 4')),
                Center(child: Text('Question 5')),
              ],
            ),
          ),
          RaisedButton(
            onPressed: () => _controller.nextPage(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeIn,
            ),
            child: const Text('Next'),
          ),
        ],
      ),
    );
  }
}

Answer 2

您可以使用循环您的问题并使用 ValueNotifier 例如根据您的变量中包含的问题索引更新您的页面

在 Flutter 中切换小部件的最佳方式是什么？

2 个答案: