如何将按钮列表显示为组而不是列表视图？ flutter

Question

我想在包装小部件中显示一个动态列表。 我想像这样显示它。我尝试了 group_button package 但它在列表中不起作用。 我试图将列表复制到列表中，但这并不能帮助我在按下时使用 list.clear() 来消失列表。

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    ElevatedButton(
                          child: Text('hi'),
                          onPressed: () => {
                              
                            }
                        ),
     ElevatedButton(
                          child: Text('hello'),
                          onPressed: () => {
                              
                            }
                        ),
     ElevatedButton(
                          child: Text('how are you?'),
                          onPressed: () => {
                              
                            }
                        ),
     ElevatedButton(
                          child: Text('comeon'),
                          onPressed: () => {
                              
                            }
                        ),
      ElevatedButton(
                          child: Text('weather'),
                          onPressed: () => {
                              
                            }
                        ),
      ElevatedButton(
                          child: Text('welcome'),
                          onPressed: () => {
                              
                            }
                        ),
      ElevatedButton(
                          child: Text('thank you'),
                          onPressed: () => {
                              
                            }
                        ),
    
  ],
), 

但是我的列表是动态的，并且换行在 listview 上不起作用

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    ListView.builder(
                      itemCount: label.length,
                     shrinkWrap:true,
                      itemBuilder: (context, j) {
                        return ElevatedButton(
                          child: Text(label[j]),
                          onPressed: () => {
                              
                            }
                        );
                        } 
                        )
  ],
),
 

label 是列表。 我能做些什么？/

Answer 1

尝试这个：

1.创建一个新的小部件（ Tag ）

class Tag extends ConsumerWidget {
  final String? text;
  final VoidCallback? onTap;
  const Tag({
    Key? key,
    this.text,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      overlayColor: MaterialStateProperty.all(Colors.transparent),
      hoverColor: Colors.transparent,
      focusColor: Colors.transparent,
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      onTap: onTap,
      child: Container(
        child: FittedBox(
          child: Container(
            margin: EdgeInsets.only(right: 6, bottom: 6),
            padding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10,
            ),
            child: Text(
              "$text",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(4),
            ),
          ),
        ),
      ),
    );
  }
}

2. 使用Wrap并将其放在一个SingleChildScrollView中，使其可滚动

SingleChildScrollView(
  child: Wrap(
    children: [
      Tag(
        text: "One",
        onTap: (){
          print("one");
        }
      ),
      Tag(
        text: "Two",
        onTap: (){
          print("two");
        }
      ),
    ]
  )
)

Answer 2

这个例子会帮助你。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

List<String> data = ["one", "two", "three" , "four" ,"five" , "five"];

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: data.map((e) => _chip(e, context)).toList(),
      spacing: 8,
    );
  }
}

Widget _chip(String data, BuildContext context) => ChoiceChip(
      labelPadding: EdgeInsets.all(2.0),
      label: Text(
        data,
        style: Theme.of(context)
            .textTheme
            .bodyText2!
            .copyWith(color: Colors.white, fontSize: 14),
      ),
      selectedColor: Colors.deepPurple,
      selected: true,
      elevation: 1,
      padding: EdgeInsets.symmetric(horizontal: 10),
    );

Answer 3

您可以使用此package实现完全相同的效果。

下面的示例代码：

 List<String> tags = [];
 List<String> options = [
 'News', 'Entertainment', 'Politics',
 'Automotive', 'Sports', 'Education',
 'Fashion', 'Travel', 'Food', 'Tech',
 'Science',
];

@override
Widget build(BuildContext context) {
return ChipsChoice<String>.multiple(
value: tags,
onChanged: (val) => setState(() => tags = val),
choiceItems: C2Choice.listFrom<String, String>(
  source: options,
  value: (i, v) => v,
  label: (i, v) => v,
),
);
}