在下拉專案中添加標簽，在串列中添加串列（FLUTTER）-有解無憂

  List<Map<String, dynamic>> category = [
    {
      "name": "One",
      "detail": ['1', '1', '1', '1', '1', '1']
    },
    {
      "name": "two",
      "detail": ['2', '2', '2', '2', '2', '2']
    },
    {
      "name": "three",
      "detail": ['3', '3', '3', '3', '3', '3']
    },
  ];

我想將名稱添加為下拉專案中的標簽，并將詳細資訊添加為專案。例如，如圖所示，
在下拉專案中添加標簽，在串列中添加串列（FLUTTER）
粗體字應該是“名稱”，普通文本是細節項

uj5u.com熱心網友回復：

這可以讓您了解如何做到這一點：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<Map<String, dynamic>> category = [
    {
      "name": "One",
      "detail": ['11', '12', '13', '14']
    },
    {
      "name": "two",
      "detail": ['21', '22', '23', '24']
    },
    {
      "name": "three",
      "detail": ['31', '32', '33', '34']
    },
  ];

  late final List data;
  String? selectedItem;

  @override
  void initState() {
    data = [
      for (final item in category)
        for (final value in item.values)
          if (value is List)
            for (final listValue in value) {'value': listValue, 'bold': false}
          else
            {'value': value, 'bold': true}
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: DropdownButton<String>(
                    value: selectedItem,
                    items: [
                      for (final item in data)
                        item['bold'] == true
                            ? DropdownMenuItem(
                                enabled: false,
                                child: Text(item['value'],
                                    style: const TextStyle(
                                        fontWeight: FontWeight.bold)))
                            : DropdownMenuItem(
                                value: item['value'],
                                child: Padding(
                                  padding: const EdgeInsets.only(left: 8),
                                  child: Text(item['value']),
                                ))
                    ],
                    onChanged: (value) {
                      setState(() {
                        selectedItem = value;
                      });
                    }))));
  }
}

輸出：

在下拉專案中添加標簽，在串列中添加串列（FLUTTER）

在initState我以某種方式轉換資料時，您有一個串列，其中每個專案對應一個下拉專案。附加資訊是否應該是粗體

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/525159.html

標籤：扑下拉按钮

上一篇：如何在Flutter中將字串轉換為顏色

下一篇：Pythonplot3D折線圖