Как сделать так, чтобы колонка прокручивалась вертикально?

Question

Как показано на рисунке, у меня есть TabBar с 3 предметами. В предмете у меня есть 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 и положить несколько щепок, чтобы ониимеют обычное поведение прокрутки.