时间戳

首页 > 解决方案 > 如何根据按下的按钮呈现不同的小部件

flutter - 如何根据按下的按钮呈现不同的小部件

问题描述

我创建了一个可水平滚动的项目列表，并且我试图根据按下的按钮呈现不同的小部件。小部件在不同且独立的文件中创建。我需要实现的是根据按下的按钮导入它们的小部件。例如，当在列表中按下“DropDown”的按钮时，会呈现“DropDown”的小部件。画面如下： 在此处输入图像描述

这是按钮列表的代码以及我应该在哪里导入小部件：

class CategoryListState extends State<CategoryList> {

  int selectedIndex = 0;
  List categories = ['Checkboxes', 'DropDown', 'SwipeCards', 'SwipeCards', 'SwipeCards', 'SwipeCards',];

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 20.0/2),
      height: 30.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: categories.length,
        itemBuilder: (context, index) => GestureDetector(
          onTap: () {
            setState(() {
              selectedIndex = index;
            });
          },
          child: Container (
            alignment: Alignment.center,
            margin: EdgeInsets.only(
              left: 20.0,
              right: index == categories.length -1 ? 20.0 : 0,
            ),
            padding: EdgeInsets.symmetric(horizontal: 20.0),
            decoration: BoxDecoration(
              color: index == selectedIndex
                  ? Colors.white.withOpacity(0.4)
                  : Colors.transparent,
              borderRadius: BorderRadius.circular(6),
            ),
            child: Text(
              categories[index].toString(),
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

标签： flutter

解决方案

您可以创建在不同文件中创建的小部件列表，并将其作为子项提供，您需要根据按下的按钮更改内容。

你可以这样做：

class CategoryListState extends State<CategoryList> {

  int selectedIndex = 0;
  List categories = ['Checkboxes', 'DropDown', 'SwipeCards', 'SwipeCards', 'SwipeCards', 'SwipeCards',];

//Your list of widgets that you import, note: keep the order same as categories
  List<Widget> category_widgets = [checkboxes_widget, dropDown_widget, swipeCards_widget, swipeCards_widget, swipeCards_widget, swipeCards_widget,];

  @override
  Widget build(BuildContext context) {
    return Column(
       children: <Wdiget>[
             Container(
      margin: EdgeInsets.symmetric(vertical: 20.0/2),
      height: 30.0,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: categories.length,
        itemBuilder: (context, index) => GestureDetector(
          onTap: () {
            setState(() {
              selectedIndex = index;
            });
          },
          child: Container (
            alignment: Alignment.center,
            margin: EdgeInsets.only(
              left: 20.0,
              right: index == categories.length -1 ? 20.0 : 0,
            ),
            padding: EdgeInsets.symmetric(horizontal: 20.0),
            decoration: BoxDecoration(
              color: index == selectedIndex
                  ? Colors.white.withOpacity(0.4)
                  : Colors.transparent,
              borderRadius: BorderRadius.circular(6),
            ),
            child: Text(
              categories[index].toString(),
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    ),
//Here the widget will be loaded when the selected_index changes i.e when you press a button the widget below will also change accordingly
      category_widgets[selected_index],
       ]
    );
  }
}

推荐阅读