Question

我创建了一个可水平滚动的项目列表，并且我尝试根据所按下的按钮来呈现不同的小部件。这些小部件是在不同且独立的文件中创建的。我需要实现的是根据按下的按钮将其导入小部件。例如，当在列表上按下“ 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),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用IndexedStack，而您基本上需要更改索引属性

IndexedStack(
  index : 0,
  children : [

   child1, //shows when index is set to 0
   child2, //shows when index is set to 1
]
)

Answer 2

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

您可以执行以下操作：

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],
       ]
    );
  }
}

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

2 个答案: