Question

如图所示，我有一个包含3个项目的TabBar。在该项目中，我有一个Column，其中包含一个Swiper和一个ListView。现在，我要滚动Column。如何修改我的代码？

import 'package:flutter/material.dart';

import 'package:fluttertoast/fluttertoast.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

import '../widgets/list_item_exam_strategy.dart';
import '../helpers/time_helper.dart';

import 'dart:math';

class NewsPage extends StatefulWidget {
  @override
  _NewsPageState createState() => _NewsPageState();
}

final List<Image> _swiperImage = [
  Image(image: AssetImage('assets/swiper1.jpg'), fit: BoxFit.cover),
  Image(image: AssetImage('assets/swiper2.jpg'), fit: BoxFit.cover),
  Image(image: AssetImage('assets/swiper3.jpg'), fit: BoxFit.cover),
  Image(image: AssetImage('assets/swiper4.jpg'), fit: BoxFit.cover),
  Image(image: AssetImage('assets/swiper5.jpg'), fit: BoxFit.cover)
];

final List<ListItemExamStrategy> _listExamStrategy = [];

class _NewsPageState extends State<NewsPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  final _random = new Random();

  final List<String> _list = ['高考攻略', '本地动态', '院校资讯'];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 10000; i++) {
      DateTime _randomDateTime =
          randomDateTime(DateTime(2019, 1, 1), DateTime.now());

      _listExamStrategy.add(ListItemExamStrategy(
          "Title$i",
          'assets/swiper2.jpg',
          '' + _randomDateTime.toString().replaceAll(RegExp(r'.000'), ''),
          '️' + _random.nextInt(10000).toString()));
    }
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _list.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            "新闻资讯",
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white),
          ),
          centerTitle: true,
          bottom: TabBar(
            isScrollable: false,
            tabs: _list.map((String ss) {
              return Tab(text: ss);
            }).toList(),
          ),
        ),
        body: TabBarView(
          children: <Widget>[HyperWidget(), HyperWidget(), HyperWidget()],
        ),
      ),
    );
  }
}

class HyperWidget extends StatefulWidget {
  @override
  _HyperWidgetState createState() => _HyperWidgetState();
}

class _HyperWidgetState extends State<HyperWidget>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: 200,
          width: MediaQuery.of(context).size.width,
          child: Swiper(
            itemBuilder: (BuildContext context, int index) {
              return _swiperImage[index];
            },
            itemCount: _swiperImage.length,
            autoplay: true,
            loop: true,
            pagination: SwiperPagination(),
            control: SwiperControl(),
            onTap: (index) => Fluttertoast.showToast(msg: '点击了第${index + 1}个'),
          ),
        ),
        Expanded(
          child: Scrollbar(
            child: ListView.builder(
              shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) {
                return ListItemExamStrategyWidget(_listExamStrategy[index]);
              },
              itemCount: _listExamStrategy.length,
            ),
          ),
        )
      ],
    );
  }
}

ListItemExamStrategyWidget代码是

import 'package:flutter/material.dart';

import 'package:fluttertoast/fluttertoast.dart';

class ListItemExamStrategy {
  final String title;
  final String image;
  final String posttime;
  final String views;

  ListItemExamStrategy(this.title, this.image, this.posttime, this.views);
}

class ListItemExamStrategyWidget extends StatelessWidget {
  final ListItemExamStrategy listItem;

  ListItemExamStrategyWidget(this.listItem);

  @override
  Widget build(BuildContext context) {
    return InkWell(
        onTap: () {
          Fluttertoast.showToast(msg: listItem.title);
        },
        child: Container(
            height: 100,
            child: Column(
              children: <Widget>[
                Container(
                  height: 96,
                  child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Expanded(
                      flex: 3,
                      child:
                          Image(image: AssetImage(listItem.image), height: 90),
                    ),
                    Expanded(
                      flex: 5,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Expanded(
                            flex: 1,
                            child: Text(''),
                          ),
                          Expanded(flex: 1, child: Text(listItem.title)),
                          Expanded(
                            flex: 2,
                            child: Text(''),
                          ),
                          Expanded(flex: 1, child: Text(listItem.posttime)),
                        ],
                      ),
                    ),
                    Expanded(flex: 2, child: Padding(
                      padding: EdgeInsets.only(bottom: 6),
                      child: Text(listItem.views),
                    ))
                  ],
                ),
                ),
                Divider(height: 1, color: Colors.grey,)
              ],
            )));
  }
}

time_helper.dart

import 'dart:core';
import 'dart:math';
DateTime randomDateTime(DateTime startDate, DateTime endDate) {
  Duration timeSpan = endDate.difference(startDate);
  //int span = randomTest.nextInt(timeSpan.inSeconds);
  var random0 = new Random();
  var random1 = new Random();
  var random2 = new Random();
  var random3 = new Random();
  Duration span = Duration(
      days: random0.nextInt(timeSpan.inDays),
      hours: random1.nextInt(24),
      minutes: random2.nextInt(60),
      seconds: random3.nextInt(60));
  return startDate.add(span);
}

Answer 1

我认为您正在寻找CustomScrollView和Slivers。

您需要拥有CustomScrollView并放入多根条子，以便它们具有共同的滚动行为。

CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
        child: Swiper(...),
    ),
    //lisst view
    SliverList(
        delegate: SliverChildBuilderDelegate(
              (context, i) {
            return ListTile(...); // HERE goes your list item
          },
          childCount: 3,
        ),
    ),
  ],
),

此外，我建议您观看Slivers Explained - The Boring Flutter Show视频，这将使您更好地了解银条以及如何使用它们。

如何使列垂直滚动？

1 个答案: