Flutter：tab状态切换，订单列表页布局

sunly_

已于 2025-01-16 17:28:45 修改

阅读量599

点赞数 1

文章标签： flutter javascript 开发语言

于 2024-12-24 14:46:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40745143/article/details/144694325

版权

在这里插入图片描述

view

import 'package:demo/common/index.dart';
import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'index.dart';

class OrderListPage extends GetView<OrderListController> {
   
  const OrderListPage({
   super.key});

  // tab切换
  Widget _buildTab() {
   
    return TDTabBar(
      controller: controller.tabController,
      tabs: controller.tabNames.map((e) => TDTab(text: e)).toList(),
      onTap: (index) {
   
        controller.onTapOrderStatus(index);
      },
      backgroundColor: Colors.white,
      showIndicator: true,
      indicatorColor: const Color(0xffe01e1e),
      labelColor: const Color(0xffe01e1e),
    );
  }

  // list 列表
  Widget _buildList() {
   
    return SmartRefresher(
      controller: controller.refreshController,
      enablePullUp: true, // 启用上拉加载
      onRefresh: controller.onRefresh, // 下拉刷新回调
      onLoading: controller.onLoading, // 上拉加载回调
      footer: const SmartRefresherFooterWidget(), // 底部加载更多组件
      header: const SmartRefresherHeaderWidget(), // 顶部下拉刷新组件
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
   
          return _buildItem();
        },
      ),
    );
  }

  // 商品item
  Widget _buildItem() {
   
    return <Widget>[
      // 状态
      <Widget>[
        TextWidget.body('订单编号:00556448656464156479',
            size: 20.sp, color: const Color(0xff999999)),
        TextWidget.body('待付款', size: 20.sp, color: const Color(0xff999999)),
      ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween