單擊文本按鈕顫動時如何顯示包含卡片的 ListView

Question

我大致知道如何直接實現Card ListView ，沒有這個問題。 但是，我不知道如何通過單擊TextButton打開ListView 。 下面是一些例子：

這是我的屏幕在此處輸入圖片說明

這是我的代碼

class _CardScreenState extends State<CardScreen> {
 var index = 0;
  bool buttonClicked = false;
  List<String> cards = [
   "On hold",
   "In progress",
   "Needs review",
 ];
  @override
  Widget build(BuildContext context) {
return Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.tealAccent,
    onPressed: () {
      Get.back();
    },
    child: Icon(Icons.arrow_back),
  ),
  body: Container(
    color: Colors.black,
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    alignment: Alignment.topCenter,
    child: SizedBox(
      height: 150,
      width: 500,
      child: DecoratedBox(
        decoration: BoxDecoration(color: Colors.grey[900]),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Spacer(),
            TextButton(
                onPressed: () {
                  setState(() {
                    buttonClicked = !buttonClicked;
                    getCard();
                  });
                },
                child: Text(
                  "On hold",
                  style: TextStyle(color: Colors.grey[300]),
                )),
            Spacer(),
            TextButton(
                onPressed: () {},
                child: Text(
                  "In progress",
                  style: TextStyle(color: Colors.grey[300]),
                )),
            Spacer(),
            TextButton(
                onPressed: () {},
                child: Text(
                  "Needs review",
                  style: TextStyle(color: Colors.grey[300]),
                )),
            Spacer(),
            TextButton(
                onPressed: () {},
                child: Text(
                  "Approved",
                  style: TextStyle(color: Colors.grey[300]),
                )),
            Spacer(),
          ],
        ),
      ),
    ),
  ),
);


 getCard() {
  return Expanded(
   child: ListView.builder(
     itemBuilder: (_, index) => Card(
       color: Colors.grey,
       child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //Padding(padding: EdgeInsets.only(left: 5, right: 5)),
          Text("data")
         ],
        ),
       ),
      ),
    );
   }
 }

Тhe 預期的結果是這樣的

Answer 1

為什么不使用 tabbar 和 tabbarview ？ 請參閱： https : //flutter.dev/docs/cookbook/design/tabs

Answer 2

演示小部件，

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.black,
          actions: [
            GestureDetector(
              onTap: () {},
              child: Container(
                  padding: EdgeInsets.all(8),
                  decoration:
                      BoxDecoration(color: Colors.blue, shape: BoxShape.circle),
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                  )),
            )
          ],
          bottom: TabBar(
            tabs: [
              Tab(
                  icon: Text(
                "On hold",
                style: TextStyle(color: Colors.grey[300]),
              )),
              Tab(
                  icon: Text(
                "In progress",
                style: TextStyle(color: Colors.grey[300]),
              )),
              Tab(
                  icon: Text(
                "Needs review",
                style: TextStyle(color: Colors.grey[300]),
              )),
              Tab(
                  icon: Text(
                "Approved",
                style: TextStyle(color: Colors.grey[300]),
              )),
            ],
          ),
          title: const Text('Tabs Demo'),
        ),
        body: TabBarView(
          children: [
            const Center(
              child: Text(
                "On hold",
              ),
            ),
            const InProgressBody(), // your listView here
            Text(
              "Needs review",
              style: TextStyle(color: Colors.grey[300]),
            ),
            Text(
              "Approved",
              style: TextStyle(color: Colors.grey[300]),
            )
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) => Container(
        height: 100,
        child: Text(
          "$index",
          style: TextStyle(color: Colors.white, fontSize: 33),
        ),
      ),
    );
  }
}