如何使这个下拉按钮小部件在 Flutter 中可重用？

Question

我有下面的DropDownButton小部件，该小部件按预期工作。 但是，我想在应用程序中重用这个小部件，并简单地将选项传递给它。

例如，我想调用同一个小部件，但将不同的 Title 传递给位于Row中的“品牌”标题，然后也更改下拉列表中的值。

我怎样才能做到这一点？

下面是代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'FLUTTER DROPDOWN BUTTON',
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final brand = [
    'ACER',
    'APPLE',
    'ASUS',
    'DELL',
    'HP',
    'LENOVO',
    'MICROSOFT',
    'TOSHIBA',
  ];

  String? value;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Dropdown Menu',
        ),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: const [
              Padding(
                padding: EdgeInsets.only(
                  left: 30.0,
                  bottom: 5.0,
                ),
                child: Text(
                  "Brand",
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
          Container(
            margin: const EdgeInsets.only(
              left: 16.0,
              right: 16.0,
            ),
            padding: const EdgeInsets.symmetric(
              horizontal: 12.0,
              vertical: 4.0,
            ),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                16,
              ),
              border: Border.all(
                color: Colors.blue,
                width: 3.0,
              ),
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                value: value,
                icon: const Icon(
                  Icons.arrow_drop_down,
                  color: Colors.blue,
                ),
                iconSize: 40.0,
                isExpanded: true,
                items: brand.map(buildMenuItem).toList(),
                onChanged: (value) => setState(
                  () => this.value = value,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
        value: item,
        child: Text(
          item,
          style: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
          ),
        ),
      );
}

Answer 1

创建一个类并从它的构建方法中返回您的下拉小部件。

Answer 2

import 'package:digital_show_room/utils/app_colors.dart';
import 'package:digital_show_room/utils/app_styles.dart';
import 'package:flutter/material.dart';

class AppDropDownButton<T> extends StatefulWidget {
  final List<DropdownMenuItem<T>> dropdownMenuItemList;
  final ValueChanged<T> onChanged;
  final T value;
  final bool isEnabled;
  final bool isBorder;
  final double radius;
  final TextStyle? textStyle;
  final Color? color;
  final Widget? icon;

  const AppDropDownButton({
    Key? key,
    required this.dropdownMenuItemList,
    required this.onChanged,
    required this.value,
    this.isEnabled = true,
    this.isBorder = false,
    this.radius = 10.0,
    this.textStyle,
    this.color,
    this.icon,
  }) : super(key: key);

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

class _AppDropDownButtonState extends State<AppDropDownButton> {
  @override
  Widget build(BuildContext context) {
    return IgnorePointer(
      ignoring: !widget.isEnabled,
      child: Container(
        padding: const EdgeInsets.only(left: 10.0, right: 10.0),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(widget.radius)),
            border: widget.isBorder
                ? Border.all(
                    color: AppColors.darkGrey,
                    width: 0,
                  )
                : Border(),
            color: widget.isEnabled
                ? (widget.color ?? AppColors.indigoLight)
                : AppColors.lightGrey),
        child: DropdownButtonHideUnderline(
          child: DropdownButton(
            isExpanded: true,
            itemHeight: 50.0,
            style: (widget.textStyle ?? AppStyles.subTitle16Style).copyWith(
                color:
                    widget.isEnabled ? AppColors.darkBlue : AppColors.darkGrey),
            items: widget.dropdownMenuItemList,
            onChanged: widget.onChanged,
            value: widget.value,
            dropdownColor: AppColors.white,
            iconEnabledColor: AppColors.grey,
            icon: widget.icon ?? Icon(Icons.arrow_drop_down),
          ),
        ),
      ),
    );
  }
}

Answer 3

VsCode 已经支持这种方法可以帮助提取一个 Widget 以重复使用。 当然，如果你想要更多功能，你需要为你的 ow 添加你的构造函数属性。

按照以下说明进行操作。

1. 将光标留在要提取的 Widget 上，单击小灯泡

2. 选择Extract Widget

3. 输入新小部件的name ，然后输入。