导航器将所选无线电或文本的值传递到颤振中的下一页

Question

我想在下一页显示收音机结果，但我不知道如何将收音机的数据或文本字段中的单词传递到下一页。

我想要的是，如果我选择客厅，那么下一页会显示'Location is Living Room'。如果我选择其他的并且在最后一个选项中输入'game room'，那么下一页将显示'Location is game room'。

如何使用导航器和收音机执行此操作？

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Select A Location',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (context) => SelectALocation(),
        '/nextpage': (context) => NextPage(),
      },
    );
  }
}

class SelectALocation extends StatefulWidget {
  @override
  _SelectALocationState createState() => _SelectALocationState();
}

class _SelectALocationState extends State<SelectALocation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          Text('Select a location'),
          SelectLocationWidget(),
          RaisedButton(
            child: Text('Next'),
            onPressed: () {
              Navigator.pushNamed(context, '/nextpage', arguments: 'Location');
            },
          )
        ],
      )),
    );
  }
}

enum Location {livingRoom, bedroom, kitchen, others }

class SelectLocationWidget extends StatefulWidget {
  SelectLocationWidget({Key key}) : super(key: key);

  @override
  _SelectLocationWidgetState createState() => _SelectLocationWidgetState();
}

class _SelectLocationWidgetState extends State<SelectLocationWidget> {
  Location _location = Location.livingRoom;
  final TextEditingController _locationOthersController =
      new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioListTile<Location>(
          title: const Text('Living Room'),
          value: Location.livingRoom,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
        RadioListTile<Location>(
          title: const Text('Bedroom'),
          value: Location.bedroom,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
        RadioListTile<Location>(
          title: const Text('Kitchen'),
          value: Location.kitchen,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
        RadioListTile<Location>(
          title: TextField(
            controller: _locationOthersController,
            decoration: InputDecoration(
              hintText: 'Others',
            ),
          ),
          value: Location.others,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
      ],
    );
  }
}

class NextPage extends StatefulWidget {
  @override
  _NextPageState createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {
  @override
  Widget build(BuildContext context) {
    return Container(child: Text('Location is $Location'));
  }
}

Answer 1

您可以复制粘贴以下代码。

我将您的 RaisedButton 小部件移到了 SelectLocationWidget 中专栏的末尾。因为您在 SelectLocationWidget 中保留了所选位置的信息。然后我为 NextPage 添加一个参数来传递位置。您可能想要实现另一个功能来打印您的 Location。我使用默认 describeEnum 函数来做到这一点。但它会将 Livig Room 打印为 livingRoom，因此您可能想要修复它。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Select A Location',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (context) => SelectALocation(),
      },
    );
  }
}

class SelectALocation extends StatefulWidget {
  @override
  _SelectALocationState createState() => _SelectALocationState();
}

class _SelectALocationState extends State<SelectALocation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          Text('Select a location'),
          SelectLocationWidget(),
        ],
      )),
    );
  }
}

enum Location {livingRoom, bedroom, kitchen, others }

class SelectLocationWidget extends StatefulWidget {
  SelectLocationWidget({Key key}) : super(key: key);

  @override
  _SelectLocationWidgetState createState() => _SelectLocationWidgetState();
}

class _SelectLocationWidgetState extends State<SelectLocationWidget> {
  Location _location = Location.livingRoom;
  final TextEditingController _locationOthersController =
      new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioListTile<Location>(
          title: const Text('Living Room'),
          value: Location.livingRoom,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
        RadioListTile<Location>(
          title: const Text('Bedroom'),
          value: Location.bedroom,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
        RadioListTile<Location>(
          title: const Text('Kitchen'),
          value: Location.kitchen,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
        RadioListTile<Location>(
          title: TextField(
            controller: _locationOthersController,
            decoration: InputDecoration(
              hintText: 'Others',
            ),
          ),
          value: Location.others,
          groupValue: _location,
          onChanged: (Location value) {
            setState(() {
              _location = value;
            });
          },
        ),
        RaisedButton(
            child: Text('Next'),
            onPressed: () {
              Navigator.push(
                context, 
                MaterialPageRoute(
                  builder: (context) => NextPage(location: _location),
                ),
              );
            },
          )
      ],
    );
  }
}

class NextPage extends StatefulWidget {
  final Location location;

  NextPage({@required this.location});

  @override
  _NextPageState createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text('Location is ${describeEnum(widget.location)}'),
      ),
    );
  }
}

Answer 2

我对您的代码做了一些更改，例如将 SelectLocationWidget 从 class 更改为 widget。下面的代码应该按照您想要的方式工作，其中包括您在选择其他代码时键入的内容：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Select A Location',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (context) => SelectALocation(),
        '/nextpage': (context) => NextPage(),
      },
    );
  }
}

enum Location {livingRoom, bedroom, kitchen, others }

class SelectALocation extends StatefulWidget {
  @override
  _SelectALocationState createState() => _SelectALocationState();
}

class _SelectALocationState extends State<SelectALocation> {
  Location location = Location.livingRoom;
  String actualLocation = 'Living Room';
  final TextEditingController locationOthersController = new TextEditingController();

  Widget selectLocationWidget() {
    return Column(
      children: <Widget>[
        RadioListTile<Location>(
          title: const Text('Living Room'),
          value: Location.livingRoom,
          groupValue: location,
          onChanged: (Location value) {
            setState(() {
              location = value;
              actualLocation = 'Living Room';
            });
          },
        ),
        RadioListTile<Location>(
          title: const Text('Bedroom'),
          value: Location.bedroom,
          groupValue: location,
          onChanged: (Location value) {
            setState(() {
              location = value;
              actualLocation = 'Bedroom';
            });
          },
        ),
        RadioListTile<Location>(
          title: const Text('Kitchen'),
          value: Location.kitchen,
          groupValue: location,
          onChanged: (Location value) {
            setState(() {
              location = value;
              actualLocation = 'Kitchen';
            });
          },
        ),
        RadioListTile<Location>(
          title: TextField(
            controller: locationOthersController,
            decoration: InputDecoration(
              hintText: 'Others',
            ),
          ),
          value: Location.others,
          groupValue: location,
          onChanged: (Location value) {
            setState(() {
              location = value;
              actualLocation = locationOthersController.text;
            });
          },
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Text('Select a location'),
            selectLocationWidget(),
            RaisedButton(
              child: Text('Next'),
              onPressed: () {
                Navigator.push(
                  context, 
                  MaterialPageRoute(
                    builder: (context) => NextPage(
                      locationText: actualLocation,
                    ),
                  )
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

class NextPage extends StatefulWidget {
  final String locationText;
  NextPage({@required this.locationText});

  @override
  _NextPageState createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Location is ${widget.locationText}')
    );
  }
}

导航器将所选无线电或文本的值传递到颤振中的下一页

Navigator pass value of selected radio or text to next page in flutter

radio

navigator

flutter