Flutter 颤栗：非常基本的愚蠢的初学者问题

我正在努力学习颤振，所以我正在学习YouTube教程。 现在我有一个无法描述的问题，它正在起作用，但我不明白为什么

我的程序包含两个.dart文件，您可以在下面看到它们

按按钮1或3（答案1，答案3）是否执行questions.dart中的问题类？ 如果我理解正确，按钮将执行“按下：回答问题”。但是(u answerQuestions)只会改变“questionIndex”的状态,而不是调用其他东西,对吧?？用户界面重新生成，问题文本更改。 但问题课确实用“风格”改变了文本的外观，这是它现在唯一的任务吗

那我们为什么要用第二个省道锉刀呢？我们可以简单地在main.dart中更改样式

main.dart：

import 'package:flutter/material.dart';

import './question.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  var questionIndex = 0;

  void _answerQuestions() {
    setState(() {
      questionIndex = questionIndex + 1;
    });
    print(questionIndex);
  }

  @override
  Widget build(BuildContext context) {
    var questions = [
      'What\'s your favorite color?',
      'What\'s your favorite animal?',
    ];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First App'),
        ),
        body: Column(
          children: [
            Question(questions[questionIndex]),
            RaisedButton(
              child: Text('Answer 1'),
              onPressed: _answerQuestions,
            ),
            RaisedButton(
                child: Text('Answer 2'),
                onPressed: () => print('Answer 2 chosen')),
            RaisedButton(
              child: Text('Answer 3'),
              onPressed: _answerQuestions,
            ),
          ],
        ),
      ),
    );
  }
}

---

当我在flatter中编写代码时，我通常倾向于为应用程序中的每个新“屏幕”启动一个文件

此外，我还为i/O（api连接、DB…）创建了一个文件，并为常用函数创建了一个文件

拥有多个文件是件好事，因为当你想要构建一个大型应用程序时，你就会意识到它需要多长时间。我的上一个应用程序大约有10000行代码。不可能仅使用1个文件进行mantain

此外，除以文件对于代码重用也很有用

---

GL

当我在flatter中编码时，我通常倾向于为应用程序中的每个新“屏幕”启动一个文件

此外，我还为i/O（api连接、DB…）创建了一个文件，并为常用函数创建了一个文件

拥有多个文件是件好事，因为当你想要构建一个大型应用程序时，你就会意识到它需要多长时间。我的上一个应用程序大约有10000行代码。不可能仅使用1个文件进行mantain

此外，除以文件对于代码重用也很有用

德国劳埃德船级社

是否通过按执行questions.dart中的问题类 按钮1或3（答案1，答案3）

两者都有。“问题”是一个无柄的小部件，它可以容纳您的问题

当您按下任何按钮（1和2）时，MyAppState将使用新的问题索引重建，并且由于您使用该索引将问题文本传递给问题小部件，

问题（问题[questions index]）

，问题将获得一个新值并显示，因为您调用了setState，如果您没有调用，在幕后，它仍然会改变值，但由于小部件不会被重建，视觉方面将保持不变

为什么你有两个不同的文件？它使你更容易看到你的应用在做什么，尤其是对于更大的项目。通常，一个文件应该有一个目的，不要在一个文件中混合功能，否则很快就会得到一个混乱的代码

在这种情况下，在单独的文件中没有问题的等价物是：

body: Column(
    children: [
        // from 
        // Question(questions[questionIndex]),
        // to
        Text(
            questions[questionIndex],
            style: TextStyle(fontSize: 28),
        ),
        RaisedButton(
            child: Text('Answer 1'),
            onPressed: _answerQuestions,
        ),
        RaisedButton(
            child: Text('Answer 2'),
            onPressed: () => print('Answer 2 chosen')),
        RaisedButton(
            child: Text('Answer 3'),
            onPressed: _answerQuestions,
        ),
    ],
),

但是如果你需要在几个地方使用相同的问题呢

Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),
Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),
Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),
Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),

每次需要时，您都必须编写相同的代码，这是一个非常简单的代码，假设您有一个包含更多代码的小部件，您真的想在每次需要时重新编写它吗

不，您只需创建一个具有所需功能的新小部件，并随时调用它

Question(questions[questionIndex]),
Question(questions[questionIndex]),
Question(questions[questionIndex]),
Question(questions[questionIndex]),




 

是否通过按执行questions.dart中的问题类 按钮1或3（答案1，答案3）

两者都有。“问题”是一个无柄的小部件，它可以容纳您的问题

当您按下任何按钮（1和2）时，MyAppState将使用新的问题索引重建，并且由于您使用该索引将问题文本传递给问题小部件，

问题（问题[questions index]）

，问题将获得一个新值并显示，因为您调用了setState，如果您没有调用，在幕后，它仍然会改变值，但由于小部件不会被重建，视觉方面将保持不变

为什么你有两个不同的文件？它使你更容易看到你的应用在做什么，尤其是对于更大的项目。通常，一个文件应该有一个目的，不要在一个文件中混合功能，否则很快就会得到一个混乱的代码

在这种情况下，在单独的文件中没有问题的等价物是：

body: Column(
    children: [
        // from 
        // Question(questions[questionIndex]),
        // to
        Text(
            questions[questionIndex],
            style: TextStyle(fontSize: 28),
        ),
        RaisedButton(
            child: Text('Answer 1'),
            onPressed: _answerQuestions,
        ),
        RaisedButton(
            child: Text('Answer 2'),
            onPressed: () => print('Answer 2 chosen')),
        RaisedButton(
            child: Text('Answer 3'),
            onPressed: _answerQuestions,
        ),
    ],
),

但是如果你需要在几个地方使用相同的问题呢

Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),
Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),
Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),
Text(
    questions[questionIndex],
    style: TextStyle(fontSize: 28),
),

每次需要时，您都必须编写相同的代码，这是一个非常简单的代码，假设您有一个包含更多代码的小部件，您真的想在每次需要时重新编写它吗

不，您只需创建一个具有所需功能的新小部件，并随时调用它

Question(questions[questionIndex]),
Question(questions[questionIndex]),
Question(questions[questionIndex]),
Question(questions[questionIndex]),




 

进口“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了StatefulWidget{
@凌驾
状态createState（）{
//TODO:实现createState
返回MyAppState（）；
}
}
类MyAppState扩展了状态{
var指数=0；
void_answerQuestions（）{
设置状态（）{
questionIndex=questionIndex+1；
});
打印（问题索引）；
}
@凌驾
小部件构建（构建上下文）{
变量问题=[
“你最喜欢什么颜色？”，
“你最喜欢的动物是什么？”，
];
返回材料PP(
家：脚手架(
appBar:appBar(
标题：文本（“我的第一个应用程序”），
),
正文：专栏(
儿童：[
正文(
问题[问题索引]，
样式：TextStyle（字体大小：28），
),
升起的按钮(
儿童：文本（“答案1”），
记者：回答问题，
),
升起的按钮(
儿童：文本（“答案2”），
按下：（）=>打印（“选择答案2”），
升起的按钮(
儿童：文本（“答案3”），
记者：回答问题，
),
],
),
),
);
}
}

这是可以做到的。。正如

@Michael

所说的

你很快就会得到一个乱七八糟的代码。

你应该在学习时遵循最佳实践