jmrh-app/lib/view/product_list.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:jmrh/constant/styles.dart';

class ProductList extends StatefulWidget {
  ProductList({Key key}) : super(key: key);

  @override
  _ProductListState createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> with SingleTickerProviderStateMixin {
  TabController _tabController;
  List<String> _tabs = ['全部', '智能', '能源', '兵器', '电子', '海洋', '生物', '工业'];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(initialIndex: 0, vsync: this, length: _tabs.length);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            backgroundColor: Colors.white,
            iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
            brightness: Brightness.light,
            title: appbarTitle('产品展示'),
            elevation: 0,
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(86),
              child: Container(
                width: double.infinity,
                child: Column(
                  children: [
                    Container(
                      height: 44,
                      padding: EdgeInsets.symmetric(vertical: 10),
                      child: TabBar(
                        controller: _tabController,
                        isScrollable: true,
                        indicatorSize: TabBarIndicatorSize.label,
                        indicatorColor: Color(0xFFEA2D2F),
                        labelColor: COLOR_PRIMARY,
                        unselectedLabelColor: Color(0xFF939599),
                        labelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 13),
                        unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 13),
                        tabs: _tabs.map<Widget>((e) => Tab(text: e)).toList(),
                      ),
                    ),
                    InkWell(
                      child: Container(
                        height: 32,
                        margin: EdgeInsets.only(left: 16, right: 16, bottom: 10),
                        decoration:
                            BoxDecoration(color: COLOR_INPUT_BG, borderRadius: BorderRadius.all(Radius.circular(2))),
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        child: Row(
                          children: [
                            Image.asset('img/icon_search.png'),
                            Container(
                              margin: EdgeInsets.only(left: 6),
                              child: Text(
                                '搜索...',
                                style: TextStyle(color: COLOR_TEXT_3, fontSize: 12),
                              ),
                            )
                          ],
                        ),
                      ),
                      onTap: () {
                        Navigator.of(context).pushNamed('/search');
                      },
                    )
                  ],
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
              return _item();
            }, childCount: 10),
          )
        ],
      ),
    );
  }

  Widget _item() {
    return InkWell(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(
              aspectRatio: 1.8,
              child: CachedNetworkImage(
                fit: BoxFit.cover,
                imageUrl:
                    'https://pics4.baidu.com/feed/a044ad345982b2b7b4c4ae3d8b4464e974099be4.jpeg?token=91e6d6e69e51bd9ac35c0f1137aeea2c',
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 12),
              child: Text(
                '消防无人机系统',
                maxLines: 2,
                style: TextStyle(fontSize: 15, color: COLOR_TEXT_1),
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),
      onTap: () {
        Navigator.of(context).pushNamed('/productDetail');
      },
    );
  }
}