在 Flutter 中包裹 ListView.separated 過濾芯片

Question

我正在制作一個使用過濾芯片的過濾屏幕，我試圖將這些芯片包裝成多行以避免剪切/水平滾動，但我無法實現這一點。 我試圖將 Wrap() class 放在返回中，但它們只是堆疊在一起而不是均勻分布。

這是我當前的代碼：

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

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  var data = ['Chip 1', 'Chip 2', 'Chip 3', 'Chip 4', 'Chip 5'];
  var selected = [];

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.black87,
        ),
        leading: IconButton(
          icon: Icon(Icons.close),
        ),
        centerTitle: true,
        title: Text(
          'Screen',
          style: TextStyle(
            color: Colors.black87,
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: Colors.green,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Center(
              child: Row(
                children: <Widget>[
                  Text(
                    "Label 1",
                  ),
                ],
              ),
            ),
            SizedBox(height: size.height * 0.02),
            Container(
              height: size.height * 0.05,
              child: ListView.separated(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemCount: data.length,
                separatorBuilder: (BuildContext context, int index) {
                  return SizedBox(
                    width: size.width * 0.03,
                  );
                },
                itemBuilder: (BuildContext context, int index) => FilterChip(
                  padding: EdgeInsets.all(10),
                  label: Text(
                    data[index],
                    style: TextStyle(fontSize: 20),
                  ),
                  onSelected: (bool value) {
                    if (selected.contains(index)) {
                      selected.remove(index);
                    } else {
                      selected.add(index);
                    }
                    setState(() {});
                  },
                  selected: selected.contains(index),
                  selectedColor: Colors.deepOrange,
                  labelStyle: TextStyle(
                    color: Colors.white,
                  ),
                  backgroundColor: Colors.green,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

這是我當前的屏幕

這是想要的結果

Answer 1

您需要使用小部件 Wrap 來過濾芯片......

看教程

包裝小部件教程