直播带货源码，flutter 顶部滚动栏+页面

直播带货源码，flutter 顶部滚动栏+页面

tabPage.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_trip/dao/travelDao.dart';
import 'package:flutter_trip/model/home/commonModel.dart';
import 'package:flutter_trip/model/travel/travelModel.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_trip/widget/applicationWebView.dart';
import 'package:flutter_trip/widget/loadingContainer.dart';
 
const _TRAVEL_URL =
    'https://m.ctrip.com/restapi/soa2/16189/json/searchTripShootListForHomePageV2?_fxpcqlniredt=09031014111431397988&__gw_appid=99999999&__gw_ver=1.0&__gw_from=10650013707&__gw_platform=H5';
const PAGE_SIZE = 10;
 
class TabPage extends StatefulWidget {
  final String travelUrl;
  final String channelCode;
 
  TabPage({Key? key, required this.travelUrl, required this.channelCode})
      : super(key: key);
 
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TabPageState();
  }
}
 
class _TabPageState extends State<TabPage> with AutomaticKeepAliveClientMixin {
  List<TravelItem> travelItem = [];
  int pageIndex = 0;
  bool isLoad = true;
 
  ScrollController _scrollController = ScrollController();
 
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _loadData();
 
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadData(loadMore: true);
        print("滚动到最底部有");
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: LoadingContainer(
        isLoading: isLoad,
        cover: true,
        child: RefreshIndicator(
          onRefresh: _handleRefresh,
          child: MediaQuery.removePadding(
            removeTop: true,
            context: context,
            child: new StaggeredGridView.countBuilder(
              controller: _scrollController,
              crossAxisCount: 2,
              itemCount: travelItem.length,
              itemBuilder: (BuildContext context, int index) =>
                  _TraveItem(index: index, item: travelItem[index]),
              staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
              // mainAxisSpacing: 4.0,
              // crossAxisSpacing: 4.0,
            ),
          ),
        ),
      ),
    );
  }
 
  Future<void> _handleRefresh() async {
    _loadData();
  }
 
  _loadData({bool loadMore = false}) {
    if (loadMore) {
      pageIndex++;
    } else {
      pageIndex = 0;
    }
 
    TravelDao.fetch(widget.travelUrl, widget.channelCode, pageIndex, PAGE_SIZE)
        .then((value) {
      setState(() {
        List<TravelItem> items = _filterItems(value.resultList);
        if (travelItem.length != 0) {
          travelItem.addAll(items);
        } else {
          travelItem = items;
        }
        isLoad = false;
      });
    }).catchError((onError) {
      print('网络请求出错 $onError');
    });
  }
 
  List<TravelItem> _filterItems(List<TravelItem>? resultList) {
    List<TravelItem> items = [];
    if (resultList != null) {
      resultList.forEach((element) {
        if (element.article != null) {
          items.add(element);
        }
      });
    }
    return items;
  }
}
 
class _TraveItem extends StatelessWidget {
  final int index;
  final TravelItem item;
  _TraveItem({Key? key, required this.index, required this.item})
      : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTap: () {
        if (item.article.urls.length > 0) {
          // Navigator.push(
          //     context,
          //     MaterialPageRoute(
          //         builder: (context) => ApplicationWebView(
          //               commonModel: CommonModel(
          //                   icon: '',
          //                   title: '详情',
          //                   url: item.article.urls[0].h5Url,
          //                   statusBarColor: 'ffffff',
          //                   hideAppBar: false),
          //             )));
        }
      },
      child: Card(
        child: PhysicalModel(
          color: Colors.transparent,
          clipBehavior: Clip.antiAlias,
          borderRadius: BorderRadius.circular(5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _itemImage(),
              Container(
                padding: EdgeInsets.all(4),
                child: Text(
                  item.article.articleTitle,
                  textAlign: TextAlign.left,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 14, color: Colors.black),
                ),
              ),
              _infoText(),
            ],
          ),
        ),
      ),
    );
  }
 
  _itemImage() {
    return Stack(
      children: [
        Image.network(item.article.images[0].dynamicUrl),
        Positioned(
          bottom: 8,
          left: 8,
          child: Container(
            padding: EdgeInsets.fromLTRB(5, 1, 5, 1),
            decoration: BoxDecoration(
              color: Colors.black54,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.location_on_outlined,
                  size: 12,
                  color: Colors.white,
                ),
                LimitedBox(
                  maxWidth: 130,
                  child: Text(
                    _positonName(),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontSize: 12, color: Colors.white),
                  ),
                )
              ],
            ),
          ),
        )
      ],
    );
  }
 
  String _positonName() {
    // return item.article.pois?.length == 0
    //     ? '未知'
    //     : item.article.pois![0]!.poiName;
    return item.article.pois?.length == 0
        ? '未知'
        : item.article.pois![0]?.poiName ?? '未知';
  }
 
  _infoText() {
    return Container(
      padding: EdgeInsets.fromLTRB(6, 0, 6, 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              PhysicalModel(
                color: Colors.transparent,
                clipBehavior: Clip.antiAlias,
                borderRadius: BorderRadius.circular(12),
                child: Image.network(
                  item.article.author!.coverImage!.dynamicUrl,
                  width: 24,
                  height: 24,
                ),
              ),
              Container(
                width: 90,
                padding: EdgeInsets.all(5),
                child: Text(
                  item.article.author!.nickName,
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 12),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Icon(
                Icons.thumb_up,
                color: Colors.grey,
                size: 12,
              ),
              Container(
                padding: EdgeInsets.only(left: 3),
                child: Text(
                  item.article.likeCount.toString(),
                  maxLines: 1,
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 10,
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

​

tabTravel.dart

import 'package:flutter/material.dart';
import 'package:flutter_trip/dao/travelDao.dart';
import 'package:flutter_trip/dao/travelTabDao.dart';
import 'package:flutter_trip/model/travel/travelModel.dart';
import 'package:flutter_trip/model/travel/travelTabModel.dart';
import 'package:flutter_trip/pages/travel/tabPage.dart';
 
class TabTravel extends StatefulWidget {
  @override
  _TabTravelState createState() => _TabTravelState();
}
 
class _TabTravelState extends State<TabTravel>
    with SingleTickerProviderStateMixin {
  late TabController tabController;
  late TravelTabModel travelTabModel;
 
  bool isInit = false;
  List<TravelTab> tabs = [];
 
  @override
  void initState() {
    //tabController = TabController(length: 0, vsync: this);
    // TODO: implement initState
    super.initState();
    TravelTabDao.fetch().then((TravelTabModel tabModel) {
      tabController = TabController(length: tabModel.tabs.length, vsync: this);
 
      setState(() {
        tabs = tabModel.tabs;
        travelTabModel = tabModel;
      });
      this.isInit = true;
    }).catchError((error) {
      print("error $error");
    });
  }
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Column(
        children: [
          isInit
              ? Container(
                  color: Colors.white,
                  padding:
                      EdgeInsets.only(top: MediaQuery.of(context).padding.top),
                  child: TabBar(
                    padding: EdgeInsets.zero,
                    controller: tabController,
                    isScrollable: true,
                    labelColor: Colors.black87,
                    labelPadding: EdgeInsets.only(left: 20, right: 20),
                    indicator: UnderlineTabIndicator(
                      borderSide: BorderSide(
                        color: Colors.lightBlue,
                        width: 3,
                      ),
                      insets: EdgeInsets.only(bottom: 10),
                    ),
                    tabs:
                        tabs.map((item) => Tab(text: item.labelName)).toList(),
                  ),
                )
              : Container(),
          Flexible(
            child: isInit
                ? TabBarView(
                    controller: tabController,
                    children: tabs
                        .map((item) => TabPage(
                            travelUrl: travelTabModel.url,
                            channelCode: item.groupChannelCode))
                        .toList(),
                    // children: tabs
                    //     .map((item) => Tab(text: item.groupChannelCode))
                    //     .toList(),
                  )
                : Container(),
          )
        ],
      ),
    );
  }
 
  @override
  void dispose() {
    // TODO: implement dispose
    tabController.dispose();
    super.dispose();
  }

以上就是 直播带货源码，flutter 顶部滚动栏+页面，更多内容欢迎关注之后的文章