Question

我有两个简单的例子，一个是Works，第二个需要一些解释。因此，当我单击示例1中的Button时，它可以工作并setStaet呈现页面。

第二个示例我使用具有setState为Button的主体函数。当我单击按钮时，即使使用setState注释也不会发生任何情况括号内的变量不显示。当我在课堂上制作Variable实例时，它可以正常工作，但我需要如何仅渲染一个按钮？

完整代码示例一

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool istrue = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Works fine'),),
      body: Center(child: body()),
    );
  }

  Widget body() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          onPressed: () {
            setState(() {
              istrue = !istrue;
            });
          },
          child: Text('Click me'),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(istrue ? 'Boo!' : ''),
        ),
      ],
    );
  }
}

完整代码示例二

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
  home: Home(),
));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool istrue = false;
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text('Works fine'),),
      body: Center(child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          body(),body(),
        ],
      )),
    );
  }

  Widget body() {

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          onPressed: () {
            setState(() {
              istrue = !istrue;
            });
          },
          child: Text('Click me'),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(istrue ? 'Boo!' : ''),
        ),
      ],
    );
  }
}

感谢天空。

Answer 1

我在理解您的问题时遇到了一些麻烦，但是我也明白英语不是您的母语。您似乎在问：“如何仅渲染一个按钮，例如＃2？”。如果这不是您的问题，请告诉我，以便我和其他人为您提供帮助。

这只会渲染一个按钮，

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
  home: Home(),
));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool istrue = false;
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text('Works fine'),),
      body: Center(child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              setState(() {
                istrue = !istrue;
              });
            },
            child: Text('Click me'),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(istrue ? 'Boo!' : ''),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(istrue ? 'Boo!' : ''),
          ),
        ],
      )),
    );
  }

}

Answer 2

在第二个示例中，您将在Scaffold小部件中的另一个Column小部件中调用Column小部件。为什么要这么做？在flutter API中可以使用多种方法来构造该布局。

您不能拥有new Column(new Column(...));多余的内容。

编辑：我从Column class的flutter网站上拉了这个：

“列”窗口小部件不滚动（通常，在列中拥有更多子项超出可用房间的容纳范围，这被认为是错误的）。如果您有一行小部件，并希望它们在空间不足时能够滚动，请考虑使用ListView。

如何仅渲染一个小部件setState

2 个答案: