flutter - flutter 多选不起作用或需要类似的东西

Question

我不太熟悉，并且尝试创建一个下拉框，用户可以在其中选择多个选项或类似于下拉框的选项。我在互联网上发现的唯一东西是多选，但我无法使其正常工作。

我尝试将其设为小部件树中的唯一子项，并且尝试将pubsec.yaml文件中的版本切换为无效。

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_multiselect/flutter_multiselect.dart';

//void main() => runApp(MaterialApp(Choices()));
Future<Null> main() async {

runApp(
  MaterialApp(
    title: "multiselect help",
    debugShowCheckedModeBanner: false,
    initialRoute: 'Choices',
    routes: {
      'Choices': (BuildContext context) => Choices(),
    },
  ),
);
}

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

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

class _ChoicesState extends State<Choices> {
  String _value;
  String _value2;
  String _value3;
  List _myActivities = [];
  String _myActivitiesResult = '';


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Row(
           children: <Widget>[
      /*  DropdownButton<String>(
          items: [
            DropdownMenuItem(
              value: "1",
              child: Text("1"),
            ),
            DropdownMenuItem(
              value: "2",
              child: Text("2"),
          ),
          ],
          onChanged: (value) {
            setState(() {
              _value = value;
            });
          },
          hint: Text("Item"),
          value: _value,
        ),

    DropdownButton<String>(
      items: [
        DropdownMenuItem(
          value: "1",
          child: Text("1"),
        ),
        DropdownMenuItem(
          value: "2",
          child: Text("2"),
        ),
        DropdownMenuItem(
          value: "3",
          child: Text("3"),
        ),
        DropdownMenuItem(
          value: "4",
          child: Text("4"),
        ),

      ],
      onChanged: (value) {
        setState(() {
          _value2 = value;
        });
      },
      //new code
      hint: Text("#"),
      value: _value2,
    ),


*/
        MultiSelect(
  autovalidate: false,
  titleText: "hi",
  validator: (value) {
    if (value == null) {
      return 'Please select one or more option(s)';
    }
  },
  errorText: 'Please select one or more option(s)',
  dataSource: [
    {
      "display": "Australia",
      "value": 1,
    },
    {
      "display": "Canada",
      "value": 2,
    },
    {
      "display": "India",
      "value": 3,
    },
    {
      "display": "United States",
      "value": 4,
    }
  ],
  textField: 'display',
  valueField: 'value',
  filterable: true,
  required: true,
  value: null,
  onSaved: (value) {
    print('The value is $value');
  }
),





      ],
      ),
      ),
    ),
  );
  }

}






  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Next Page"),
      ),

      body: Choices()
    );
  }

在预期的结果中，我将具有一个下拉列表或类似的内容，可以在其中进行多项选择。实际结果什么也没有显示，包括未注释掉兄弟/姐妹小部件时甚至没有显示。谢谢你的帮助!

Answer 1

在处理Row时，布局有时会以无限宽度结束，这就是这里发生的情况。幸运的是，解决方案很简单。只需将MultiSelect小部件包装在Expanded小部件中，它将约束MultiSelect仅使用可用宽度，而不再使用其他宽度。

所以

MultiSelect(...),

变成

Expanded(
  child: MultiSelect(...),
),

或者，您可以完全删除 Row，而只需将 MultiSelect放在单个小部件中即可。