如何使用Flutter中的函数创建动态TabBarView /渲染新Tab？-Java 学习之路

所以我在一段时间内一直在学习颤抖，我陷入了困境 . 对不起，如果这是一个noobish问题 . 我目前正在尝试构建类似卡片选项卡的东西 . 信息和小部件将存储在卡中 .

想象一下像Tinder这样的东西，他们有多个卡片堆叠，左右滑动以进行导航 .

我打算创建它，但我似乎无法找到一种方法来添加/渲染一个新的卡片按钮 .

这就像在列表中添加一些内容一样，Flutter将使用ListView构建器添加到列表中 . 但是没有TabBarView构建器 . 这是不可能做到的事情吗？我尝试将一个列表放在一个选项卡中，但它仍然不会相同 .

我在这里创建了一些基本的骨架来帮助传达我的意思 . 所以卡片将左右滑动，appBar中有一个按钮可以添加卡片 . Lenght现在是2，我希望按钮能够呈现第3张牌 . 这可能吗？

提前致谢！

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new CardStack(),

  ));
}


class CardStack extends StatefulWidget {
  @override
  _MainState createState() => new _MainState();
}


class _MainState extends State<CardStack> with SingleTickerProviderStateMixin {

  TabController _cardController;

  @override
  void initState() {
    super.initState();
    _cardController = new TabController(vsync: this, length: 2);
  }

  @override
  void dispose() {
    _cardController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
      backgroundColor: Colors.grey[300],
      appBar: new AppBar(
          actions: <Widget>[
            new IconButton(
              icon: const Icon(Icons.add),
              tooltip: 'Add Tabs',
              onPressed: null,
            ),
          ],
          title: new Text("Title Here"),
          bottom: new PreferredSize(
          preferredSize: const Size.fromHeight(20.0),
          child: new Theme(
            data: Theme.of(context).copyWith(accentColor: Colors.grey),
            child: new Container(
              height: 50.0,
              alignment: Alignment.center,
              child: new TabPageSelector(controller: _cardController),
            ),
          )
        )
      ),
      body: new TabBarView(
        controller: _cardController,
        children: <Widget>[
          new Center(
            child: new Card(
              child: new Container(
                  height: 450.0,
                  width: 300.0,
                  child: new IconButton(
                    icon: new Icon(Icons.favorite, size: 100.0),
                    tooltip: 'Favorited',
                    onPressed: null,
                  )
              ),
            ),
          ),
          new Center(
            child: new Card(
              child: new Container(
                  height: 450.0,
                  width: 300.0,
                  child: new IconButton(
                    icon: new Icon(Icons.local_pizza, size: 50.0,),
                    tooltip: 'Pizza',
                    onPressed: null,
                  )
              ),
            ),
          ),
        ],
      ),
    );
  }
}

1 回答

试试这个 .
Demo

要创建动态选项卡，您可以使用列表并在每次单击按钮时继续附加列表 .

技巧：清除列表并重新绘制一个空小部件，然后按照列表再次绘制小部件 .

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(
    home: new CardStack(),
  ));
}

class DynamicTabContent {
  IconData icon;
  String tooTip;

  DynamicTabContent.name(this.icon, this.tooTip);
}

class CardStack extends StatefulWidget {
  @override
  _MainState createState() => new _MainState();
}

class _MainState extends State<CardStack> with TickerProviderStateMixin {
  List<DynamicTabContent> myList = new List();

  TabController _cardController;

  TabPageSelector _tabPageSelector;

  @override
  void initState() {
    super.initState();

    myList.add(new DynamicTabContent.name(Icons.favorite, "Favorited"));
    myList.add(new DynamicTabContent.name(Icons.local_pizza, "local pizza"));

    _cardController = new TabController(vsync: this, length: myList.length);
    _tabPageSelector = new TabPageSelector(controller: _cardController);
  }

  @override
  void dispose() {
    _cardController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey[300],
      appBar: new AppBar(
          actions: <Widget>[
            new Padding(
              padding: const EdgeInsets.all(1.0),
              child: new IconButton(
                icon: const Icon(
                  Icons.add,
                  size: 30.0,
                  color: Colors.white,
                ),
                tooltip: 'Add Tabs',
                onPressed: () {
                  List<DynamicTabContent> tempList = new List();

                  myList.forEach((dynamicContent) {
                    tempList.add(dynamicContent);
                  });

                  setState(() {
                    myList.clear();
                  });

                  if (tempList.length % 2 == 0) {
                    myList.add(new DynamicTabContent.name(Icons.shopping_cart, "shopping cart"));
                  } else {
                    myList.add(new DynamicTabContent.name(Icons.camera, "camera"));
                  }

                  tempList.forEach((dynamicContent) {
                    myList.add(dynamicContent);
                  });

                  setState(() {
                    _cardController = new TabController(vsync: this, length: myList.length);
                    _tabPageSelector = new TabPageSelector(controller: _cardController);
                  });
                },
              ),
            ),
          ],
          title: new Text("Title Here"),
          bottom: new PreferredSize(
              preferredSize: const Size.fromHeight(10.0),
              child: new Theme(
                data: Theme.of(context).copyWith(accentColor: Colors.grey),
                child: myList.isEmpty
                    ? new Container(
                        height: 30.0,
                      )
                    : new Container(
                        height: 30.0,
                        alignment: Alignment.center,
                        child: _tabPageSelector,
                      ),
              ))),
      body: new TabBarView(
        controller: _cardController,
        children: myList.isEmpty
            ? <Widget>[]
            : myList.map((dynamicContent) {
                return new Card(
                  child: new Container(
                      height: 450.0,
                      width: 300.0,
                      child: new IconButton(
                        icon: new Icon(dynamicContent.icon, size: 100.0),
                        tooltip: dynamicContent.tooTip,
                        onPressed: null,
                      )),
                );
              }).toList(),
      ),
    );
  }
}

希望这可以帮助：）

回复于 2024-05-15T09:50:50+08:00

如何使用Flutter中的函数创建动态TabBarView /渲染新Tab？

1 回答

相关问题