如何只渲染一个 Widget setState

Posted 2023-02-23

【中文标题】如何只渲染一个 Widget setState

【英文标题】：How can I render only one Widget setState

【发布时间】：2019-01-05 08:57:30

【问题描述】：

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

第二个例子我使用了一个具有 setState 按钮的 body 函数。当我单击按钮时，即使使用 setState 注释也没有任何反应，如果 括号内的变量它不呈现。 当我在类中创建变量实例时，它工作正常，但我只需要渲染一个按钮如何？

完整代码示例一

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!' : ''),
        ),
      ],
    );
  

感谢天空。

【问题讨论】：

你的两个例子都对我有用！

这两个例子都很好，但我只需要渲染一个按钮。

【参考方案1】：

在第二个示例中，您在 Scaffold 小部件的另一个 Column 小部件中调用 Column 小部件。为什么要这么做？在 Flutter API 中有很多方法可以构建该布局。

你不能有一个new Column(new Column(...)); 它是多余的。

编辑： 我从 Column class 的颤振网站上提取了这个：

Column 小部件不滚动（通常认为 Column 中的子级数量超过可用房间的容量是错误的）。如果您有一行小部件，并且希望它们能够在空间不足时滚动，请考虑使用 ListView。

【参考方案2】：

我在理解您的问题时遇到了一些问题，但我也明白英语不是您的第一语言。您似乎在问，“我怎样才能只渲染一个按钮，例如 #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!' : ''),
          ),
        ],
      )),
    );