如何將滾動添加到底部導航欄專案

我已經實作了一個可以瀏覽幾個螢屏的應用程式。我添加了底部導航欄和第一個選項卡我添加了一個包含串列視圖專案和資料的頁面。我sqlflite無法滾動串列視圖資料。我添加的其他選項卡顯示另一個螢屏。代碼如下。

//this is my homepage screen

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late List<LeaveModel> _leaveList = [];
  final _userService = LeaveService();
  int _selectedIndex = 0;

  @override
  void initState() {
    getAllUserDetails();

    super.initState();
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

我創建了包含 4 個專案的底部導航欄。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {},
        ),
        title: const Text('Leave Tracker'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.notifications),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.add_box),
            onPressed: () {
              Navigator.push(context,
                      MaterialPageRoute(builder: (context) => AddLeave()))
                  .then((data) {
                if (data != null) {}
                getAllUserDetails();
              });
            },
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.man),
            label: 'All',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.sick_rounded),
            label: 'Sick',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.holiday_village),
            label: 'Casual',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.weekend),
            label: 'Other',
          ),
        ],
      ),

從這 4 個專案轉到不同的 3 個螢屏。第一個專案鏈接到同一頁面。（主頁（））

 body: Center(
        child: _selectedIndex == 0
            ? myListView(context)
            : _selectedIndex == 1
                ? AllSickLeave()
                : _selectedIndex == 2
                    ? AllCasualLeave()
                    : ViewOtherLeave(),
      ),
    );
  }

在 HomePage() 中，我添加了串列視圖和從 sqlflite 資料庫中獲取的資料。

getAllUserDetails() async {
    var users = await _userService.readAllLeave();
    _leaveList = <LeaveModel>[];
    users.forEach((leave) {
      setState(() {
        var leaveModel = LeaveModel();
        leaveModel.id = leave['id'];
        leaveModel.leaveType = leave['leaveType'];
        leaveModel.leaveStartDate = leave['leaveStartDate'];
        leaveModel.leaveEndDate = leave['leaveEndDate'];
        leaveModel.reason = leave['reason'];
        leaveModel.leaveDays = leave['leaveDays'];
        _leaveList.add(leaveModel);
      });
    });
  }

  Widget myListView(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 5.0,
            ),
            Text(
              'All Leave Details',
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
            ListView.builder(
                shrinkWrap: true,
                itemCount: _leaveList.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(
                          'Leave Type : ${_leaveList[index].leaveType ?? ''}'),
                      subtitle: Text('Reason : ${_leaveList[index].reason}'),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                              onPressed: () {},
                              icon: Icon(
                                Icons.edit,
                                color: Colors.teal,
                              )),
                          IconButton(
                              onPressed: () {},
                              icon: Icon(
                                Icons.delete,
                                color: Colors.red,
                              )),
                        ],
                      ),
                    ),
                  );
                }),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

你不需要有多個腳手架，試試這個格式

Widget myListView(BuildContext context) {
  return ListView.builder(
      padding: EdgeInsets.only(top: 25),
      itemCount: _leaveList.length   1,
      itemBuilder: (context, index) {
        if (index == 0)
          return Text(
            'All Leave Details',
            style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
          );
        return Card(
          child: ListTile(

標籤：扑镖列表显示滚动

上一篇：WinUI3ListView-如何在mvvm中以編程方式選擇專案？

下一篇：如何使用.NETC#將專案添加到ListView