flutter - 按下按钮时显示ListView小部件

Question

我试图在按下按钮时显示小部件(NewWidget)。理想情况下，按钮将是小部件的一部分，并且当按下按钮时，将显示小部件的其余部分。我没有让它工作。有人可以看看吗？只需要一分钟。谢谢!!

这是一个简单的应用程序。 NewWidget被称为主体，我只希望它显示一个按钮，然后在按下时显示其余的窗口小部件。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
       //This is where NewWidget is called
        body: NewWidget(
          Options: [
            {
              "display": "Australia",
              "value": 1,
              "checked": false
            },
            {
              "display": "Finland",
              "value": 2,
              "checked": false
            }
          ]
        ),
        ),
      );
  }
}


class NewWidget extends StatefulWidget {
  //const NewWidget({ Key key }) : super(key: key);
  //final List Options;

  @override
  _NewWidgetState createState() => _NewWidgetState();
  final List Options;

  NewWidget({
    this.Options
  }) : super();
}



class _NewWidgetState extends State<NewWidget> {

List _localDataSource = [];

  @override
  void initState() {
    super.initState();
    widget.Options.forEach((item) {
      var newItem = {
        'display': item['display'],
        'value': item['value'],
        'checked': item['checked']
      };
      _localDataSource.add(newItem);
    });
  }

  @override
  Widget build(BuildContext context) {

    ListView _Olist() {
      List<Widget> options = [];
      _localDataSource.forEach((item) {
        options.add(ListTile(
          title: Text(item['display']),
          leading: Transform.scale(
          child: Icon(
            item['checked'] ? Icons.check_box : Icons.check_box_outline_blank),
            scale: 1.4,
          ),
        onTap: () {
          item['checked'] = !item['checked'];
          setState(() {});
        })
);});


        return ListView(children: options);
      }

    return _Olist();
      }
    }

Answer 1

您可以初始化一个 bool(boolean) 并将其设置为false:bool buttonClicked = false
然后，您可以实现一个条件语句，而不是让构建简单地返回_oList，

如果buttonClicked = false或，则

返回按钮
如果buttonClicked = true

，则

返回_oList

然后只需按下按钮setState并更改buttonClicked = !buttonClicked。

可能是这样的:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        //This is where NewWidget is called
        body: NewWidget(options: [
          {"display": "Australia", "value": 1, "checked": false},
          {"display": "Finland", "value": 2, "checked": false}
        ]),
      ),
    );
  }
}

class NewWidget extends StatefulWidget {
  //const NewWidget({ Key key }) : super(key: key);
  //final List Options;

  @override
  _NewWidgetState createState() => _NewWidgetState();
  final List options;

  NewWidget({this.options}) : super();
}

class _NewWidgetState extends State<NewWidget> {
  List _localDataSource = [];

  @override
  void initState() {
    super.initState();
    widget.options.forEach((item) {
      var newItem = {
        'display': item['display'],
        'value': item['value'],
        'checked': item['checked']
      };
      _localDataSource.add(newItem);
    });
  }

  bool buttonClicked = false;

  @override
  Widget build(BuildContext context) {
    ListView _oList() {
      List<Widget> options = [];
      _localDataSource.forEach((item) {
        options.add(ListTile(
            title: Text(item['display']),
            leading: Transform.scale(
              child: Icon(item['checked']
                  ? Icons.check_box
                  : Icons.check_box_outline_blank),
              scale: 1.4,
            ),
            onTap: () {
              item['checked'] = !item['checked'];
              setState(() {});
            }));
      });

      return ListView(children: options);
    }

    if (buttonClicked) {
      return _oList();
    } else {
      return Center(
        child: FlatButton(
          padding: EdgeInsets.all(20.0),
          child: Text(
            'Click Me',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          color: Colors.lightBlue,
          onPressed: () {
            setState(() {
              buttonClicked = !buttonClicked;
            });
          },
        ),
      );
    }
  }
}