Flutter

Question

我是 Flutter 新手。我有 2 Containers 和 SizedBox。我正在尝试为第一个设置水平滚动：Slider1LocalPage().

我读到了它并尝试使用 scrollDirection: Axis.horizontal 但它会导致错误。我尝试使用 Column 但没有成功。

对我的示例的帮助将帮助我学习和理解 Flutter。这是我在 main.dart

中的小部件主体

      body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Text(
            'Horizontal - can\'t deal with',
            style: TextStyle(fontSize: 18),
          ),
          Container(
            child: SizedBox(height: 260.0, child: Slider1LocalPage()),
          ),
          Text(
            'Vertical',
            style: TextStyle(fontSize: 18),
          ),
          Container(
            child: SizedBox(height: 290, child: List1LocalPage()),
          )
        ],
      ),
    ),

Slider1LocalPage()

class Slider1LocalPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        body: FutureBuilder<List<Record>>(
          future: List1Api.getList1Locally(context),
          builder: (context, snapshot) {
            final records = snapshot.data;

            switch (snapshot.connectionState) {
              case ConnectionState.waiting:
                return Center(child: CircularProgressIndicator());
              default:
                if (snapshot.hasError) {
                  return Center(child: Text('Some error occurred!'));
                } else {
                  return buildList1(records);
                }
            }
          },
        ),
      );

  Widget buildList1(List<Record> records) => ListView.builder(
        physics: BouncingScrollPhysics(),
        itemCount: records.length,
        itemBuilder: (context, index) {
          final record = records[index];

          return ListTile(
            onTap: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context) => ContentPage(record: record),
            )),
            leading: CircleAvatar(
              backgroundImage: NetworkImage(record.urlAvatar),
            ),
            title: Text(record.title1),
            subtitle: Text(record.content1),
          );
        },
      );
}

Answer 1

您可以在此处查看工作演示：https://flutter.dev/docs/cookbook/lists/horizontal-list

Widget buildList1(List<Record> records) => ListView.builder(
        scrollDirection: Axis.horizontal,
        physics: BouncingScrollPhysics(),
        itemCount: records.length,
        itemBuilder: (context, index) {
          final record = records[index];

          return ListTile(
            onTap: () => Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context) => ContentPage(record: record),
            )),
            leading: CircleAvatar(
              backgroundImage: NetworkImage(record.urlAvatar),
            ),
            title: Text(record.title1),
            subtitle: Text(record.content1),
          );
        },
      );

问题是ListTile引起的，因为它占满了宽度。 ListTile 似乎不适合水平列表视图。要添加点击操作，您可以使用 GestureDetector。

Answer 2

@Divyesh 回答是好的，这里是一起使用 Horizontal 和 vertical 列表的演示。我更喜欢使用 CustomScrollView 和 MultiSliver 来处理条子类型。只需添加 sliverTools 即可使用 MultiSliver，否则几乎没有额外的代码来处理这种情况。


  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        MultiSliver(
          children: [
            Text(
              'Horizontal - can deal with',
              style: TextStyle(fontSize: 18),
            ),
            MultiSliver(
              children: [
                // Slider1LocalPage(),
                Container(
                  height: 140,
                  child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    physics: BouncingScrollPhysics(),
                    itemCount: 20,
                    itemBuilder: (context, index) {
                      // final record = records[index];

                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: GestureDetector(
                          // onTap: () => Navigator.of(context).push(MaterialPageRoute(
                          //   builder: (BuildContext context) => ContentPage(record: record),
                          // ),),
                          child: Column(
                            children: [
                              CircleAvatar(
                                radius: 40,
                                backgroundImage: NetworkImage(
                                  "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg",
                                ),
                              ),
                              Text("title here"),
                              Text("subtitle"),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
            Text(
              'Vertical',
              style: TextStyle(fontSize: 18),
            ),

            MultiSliver(
              children: List.generate(
                23,
                (index) => Container(
                  height: 50,
                  width: double.infinity,
                  color: index % 2 == 0 ? Colors.cyanAccent : Colors.pinkAccent,
                ),
              ),
            ),
            // Container(
            //  color: COlors,

            //     // child: List1LocalPage(),
            //   ),
            // )
          ],
        ),
      ],
    );
  }

Answer 3

感谢 MultiSliver 和有关 ListTile 的信息。两者将来都会有用。所以，现在水平 ListView 可以工作了。几乎不错，但现在我在每个列中都有数据循环。我知道原因在 Widget buildSlider1 ListView 但找不到 solution.Any hint?screnshot

  Widget buildSlider1(List<Record> records) => ListView.builder(
    physics: BouncingScrollPhysics(),
    itemCount: records.length,
    itemBuilder: (context, index) {
      final record = records[index];

      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: GestureDetector(
          // onTap: () => Navigator.of(context).push(MaterialPageRoute(
          //   builder: (BuildContext context) => ContentPage(record: record),
          // ),),
          child: Column(
            children: [
              Text(record.title1),
              Text(record.content1),
            ],
          ),
        ),
      );
    },
  );

_

Widget build(BuildContext context) {
return CustomScrollView(
  slivers: [
    MultiSliver(
      children: [
        Text(
          'Horizontal - can deal with',
          style: TextStyle(fontSize: 18),
        ),
        MultiSliver(
          children: [
            Container(
              height: 210,
              child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                physics: BouncingScrollPhysics(),
                itemCount: 20,
                itemBuilder: (context, index) {
                  // final record = records[index];

                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: GestureDetector(
                      // onTap: () => Navigator.of(context).push(MaterialPageRoute(
                      //   builder: (BuildContext context) => ContentPage(record: record),
                      // ),),
                      child: Column(
                        children: [
                          SizedBox(
                              width: 220,
                              height: 280,
                              child: Slider1LocalPage()),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
        Text(
          'Vertical',
          style: TextStyle(fontSize: 18),
        ),
        MultiSliver(children: [
          SizedBox(
              height: 380, width: double.infinity, child: List1LocalPage()),
        ]),
      ],
    ),
  ],
);}

Flutter - 无法使用 SizedBox 设置水平 ListView

Flutter - Can't set Horizontal ListView with SizedBox

mobile

listview

visual-studio

dart