颤振下拉按钮选择问题

Question

大家好，我刚刚开始 flutter 我正在做一个小项目，准确地说是一个清单项目我已经创建了一个清单我将文本从 List 加载到 ListTile 并且我已经加载了下拉按钮答案，但是当我点击下拉按钮时，整个按钮同时发生变化，以及如何将下拉按钮放在右边？（查看 gif）

我想让单元格内加载的文本更具可读性，这是代码，在此先感谢。

   import 'package:flutter/material.dart';

class Check_lists extends StatefulWidget {
  String sug_one;
  String sug_two;
  Check_lists(this.sug_one, this.sug_two);

  @override
  State<Check_lists> createState() => _Check_listsState();
}

class _Check_listsState extends State<Check_lists> {
  String dropdownValue = "Not Done";
  int index = 0;
  List<String> propositions = <String>[
    "Single line spacing",
    "Title set below the 2 top margin",
    "Title not exceeding 15 words (including articles,prepositions and conjunctions)",
    "Title in uppercase",
    "Title arranged in an inverted pyramid",
    "All parts centered, and in boldface",
    "4 line skips (5 enter presses) between parts",
    "First name, middle initial(s), last name format for the author’s names",
    "Leader's name followed by members names",
    "alphabetized by surname",
    "Date of proposal stated as month, day, year",
    "Start of pagination"
  ];
  //List<String> answer = ["Done", "partially Done", "Not Done"];
  List<String> selectedItemValue = <String>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: const Color.fromRGBO(82, 113, 255, 25),
          title: Row(
            children: [
              Container(
                  padding: const EdgeInsets.all(10.0),
                  child: const Text('CHEKILI Table of Content'))
            ],
          ),
        ),
        body: Column(
          children: <Widget>[
            Flexible(
              child: ListView.builder(
                itemCount: propositions.length,
                itemExtent: 50.0,
                itemBuilder: (BuildContext context, int index) {
                  for (int i = 0; i < propositions.length; i++) {
                    selectedItemValue.add("Not Done");
                  }
                  return ListTile(
                    title: Text("${propositions[index]}"),
                    leading: _dropdown(),
                  );
                },
              ),
            ),
          ],
        ));
  }

  Widget _dropdown() {
    return DropdownButton<String>(
      isExpanded: false,
      value: selectedItemValue[index].toString(),
      items: _dropDownItem(),
      onChanged: (value) {
        selectedItemValue[index] = value as String;
        setState(() {});
      },
    );
  }

  List<DropdownMenuItem<String>> _dropDownItem() {
    List<String> ddl = ["Not Done", "Partially Done", "Done"];
    return ddl
        .map((value) => DropdownMenuItem(
              value: value,
              child: Text(value),
            ))
        .toList();
  }
}

Answer 1

因为您正在使用 class 的 index 变量。

将索引传递给 _dropdown 函数，如下所示。

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromRGBO(82, 113, 255, 25),
        title: Row(
          children: [
            Container(
                padding: const EdgeInsets.all(10.0),
                child: const Text('CHEKILI Table of Content'))
          ],
        ),
      ),
      body: Column(
        children: <Widget>[
          Flexible(
            child: ListView.builder(
              itemCount: propositions.length,
              itemExtent: 50.0,
              itemBuilder: (BuildContext context, int index) {
                for (int i = 0; i < propositions.length; i++) {
                  selectedItemValue.add("Not Done");
                }
                return ListTile(
                  title: Text("${propositions[index]}"),
                  leading: _dropdown(index), // <-- HERE
                );
              },
            ),
          ),
        ],
      ));
}

Widget _dropdown(int index) { // <-- HERE
  return DropdownButton<String>(
    isExpanded: false,
    value: selectedItemValue[index].toString(),
    items: _dropDownItem(),
    onChanged: (value) {
      selectedItemValue[index] = value as String;
      setState(() {});
    },
  );
}

其他说明：

不要将像 selectedItemValue.add("Not Done"); 这样向列表添加一些值的循环放在 ListView.builder.

中

因为当列表项出现在屏幕上时会调用生成器，所以 selectedItemValue 将被添加太多次。所以在 initState 函数中初始化列表，如下所示。

@override
void initState() {
  super.initState();
  selectedItemValue.addAll(List.filled(propositions.length, "Not Done"));
}

颤振下拉按钮选择问题

flutter dropdown button selection issue

flutter

dart

flutter-layout

其他说明：