flutter 如何在ListView中获取两行.separated

bpsygsoo  于 2023-01-21  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我想实现下面的输出,但是我想使用ListView.separated显示一列中的两行,而不是一列中的一行。我该如何实现呢?ListView.separated没有显示两行的选项。

Scaffold(
          body: ListView.separated(
            itemBuilder: (context, position) {
              return Container(
                height: 40.0,
                color: Colors.white,
                child: Text('Your text goes here'),
              );
            },
            separatorBuilder: (context, position) {
              return Container(
                color: Colors.red,
                child: Text('Divider'),
              );
            },
            itemCount: 20,
          ),
        ));

2wnc66cl

2wnc66cl1#

要实现这一点,可以使用Row小部件,要扩展Text小部件,可以使用Expanded Package 它们。
完整的工作示例(基于您的代码):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.separated(
          itemBuilder: (context, position) {
            return Container(
              height: 40.0,
              color: Colors.white,
              child: Text('Your text goes here'),
            );
          },
          separatorBuilder: (context, position) {
            return Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.red,
                    child: Text(
                      'Divider 1',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.red,
                    child: Text(
                      'Divider 2',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ],
            );
          },
          itemCount: 20,
        ),
      ),
    );
  }
}

相关问题