TDesign：Cascader 级联选择器(省市区三级联动)

最新推荐文章于 2025-05-10 17:06:50 发布

sunly_

最新推荐文章于 2025-05-10 17:06:50 发布

阅读量412

点赞数 5

分类专栏： TDesign 文章标签： tdesign javascript 开发语言

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

版权

Cascader 级联选择器API

参考官方示例代码
在这里插入图片描述

在自己的模板中使用：view

import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'index.dart';

class HomePage extends GetView<HomeController> {
   
  const HomePage({
   super.key});

  // 主视图
  Widget _buildView(BuildContext context) {
   
    return <Widget>[
      _buildHorizontalCascader(context),
    ].toColumn();
  }

  Widget _buildHorizontalCascader(BuildContext context) {
   
    return GestureDetector(
      onTap: () {
   
        TDCascader.showMultiCascader(
          context,
          title: '选择地址',
          subTitles: ['请选择省份', '请选择城市', '请选择区/县'],
          data: controller.cityListData.map((item) => item.toJson()).toList(),
          initialData: controller.initData,
          theme: 'tab',
          onChange: (selectData) {
   
            controller.onTapAddress(selectData);
          },
          onClose: () {
   
            Navigator.of(context).pop();
          },
        );
      },
      child: _buildSelectRow(context, controller.selected_1 ?? '', '选择地区'),
    );
  }

  Widget _buildSelectRow(BuildContext context, String output, String title) {
   
    return Container(
      color: TDTheme.of(context).whiteColor1,
      height: 56,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 16, top: 16, bottom: 16),
                child: TDText(
                  title,
                  font: TDTheme.of(context).fontBodyLarge,
                ),
              ),
              Expanded(
                child:

最低0.47元/天解锁文章