Flutter ListView 与第属性行 space 之间

Question

寻找具有水平滚动和 space 行属性之间的 Flutter Listview（自动调整等于 spaces 的项目）如果项目数量较少（可以放在屏幕）并在项目数更多时滑动

Answer 1

您可以使用带有滚动方向的代码进行换行，也可以使用展开。

ListView.builder(
              scrollDirection: Axis.horizontal,
                itemCount: numbers.length,
               itemBuilder: (context, index) {
                  return Container(
                    width: MediaQuery.of(context).size.width * 0.6,
                    child: Card(
                      color: Colors.blue,
                      child: Container(
                        child: Center(child: "text", style: TextStyle(color: Colors.white, fontSize: 36.0),)),
                      ),
                    ),
                  );
            }),

对于等号分隔符用户 ListView.separator 像这样

ListView.separated(
  scrollDirection: Axis.horizontal,
  separatorBuilder: (context, index) => Divider(
        color: Colors.black,
      ),
  itemCount: 20,
  itemBuilder: (context, index) => Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(child: Text("Index $index")),
      ),
)

Answer 2

通过为列表中的每个元素创建键，然后在运行时计算它的大小来解决。

如果所有元素的大小加在一起大于屏幕宽度，我们可以有一个行，否则，我们需要使用ListView

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double elementsWidth;
  List paymentMethodsList;

  @override
  void initState() {
    paymentMethodsList = [
      {
        'paymentName': 'UPI Transfer',
        "key": GlobalKey(),
      },
      {
        'paymentName': 'NEFT Transfer',
        "key": GlobalKey(),
      },
      {
        'paymentName': 'IMPS Transfer',
        "key": GlobalKey(),
      },
      {
        'paymentName': 'RTGS Transfer',
        "key": GlobalKey(),
      },
      {
        'paymentName': 'UPI Collect',
        "key": GlobalKey(),
      },
    ];
    super.initState();
  }

  void postFrameCallback(_) {
    double widthOfElements = 0;
    int numberOfElementsParsed = 0;
    for (int i = 0; i < paymentMethodsList.length; i++) {
      var context = paymentMethodsList[i]['key'].currentContext;
      if (context == null) return;
      numberOfElementsParsed++;
      widthOfElements += context.size.width;
    }
    if (numberOfElementsParsed == paymentMethodsList.length) {
      setState(() {
        elementsWidth = 100 + widthOfElements;
        print(elementsWidth);
      });
    }
    // if (oldSize == newSize) return;

    // oldSize = newSize;
    // widget.onChange(newSize);
  }

  @override
  Widget build(BuildContext context) {
    SchedulerBinding.instance.addPostFrameCallback(postFrameCallback);
    return Scaffold(
      backgroundColor: Colors.black,
      // appBar: buildAppBar(),
      body: buildPage(),
    );
  }

  buildPage() => Column(
        children: [
          SizedBox(
            height: 25,
          ),
          buildPaymentListWidget(),
          // SizedBox(
          //   height: 20,
          // ),
        ],
      );

  Container buildPaymentListWidget() {
    return Container(
      height: 90,
      padding: EdgeInsets.only(left: 20, right: 20),
      child: elementsWidth != null &&
              elementsWidth < MediaQuery.of(context).size.width
          ? Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                for (var i = 0; i < paymentMethodsList.length; i++)
                  buildPaymentItemWidget(i)
              ],
            )
          : ListView.separated(
              shrinkWrap: false,
              scrollDirection: Axis.horizontal,
              separatorBuilder: (context, index) => SizedBox(
                width: 15,
              ),
              itemBuilder: (context, index) {
                return buildPaymentItemWidget(index);
              },
              itemCount: paymentMethodsList.length,
            ),
    );
  }

  Container buildPaymentItemWidget(int index) {
    return Container(
      key: paymentMethodsList[index]['key'],
      child: Text(
        paymentMethodsList[index]['paymentName'],
        textAlign: TextAlign.center,
        style: TextStyle(
            fontSize: 12, fontWeight: FontWeight.w400, color: Colors.white),
      ),
    );
  }
}

Flutter ListView 与第属性行 space 之间

Flutter ListView with Row Property of space between

listview

row

dart

hybrid-mobile-app

flutter

Flutter ListView 与第 属性 行 space 之间

Flutter ListView with Row Property of space between

listview

row

dart

hybrid-mobile-app

flutter

Flutter ListView 与第属性行 space 之间