FLutter 使用DefaultTabController组件和ListView组件实现简陋的新闻页面

1. 先创建一个新闻信息列表

2.使用DefaultTabController组件实现基本的页面布局

相关代码

        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text("冈勿新闻"),
            centerTitle: true,
            bottom: TabBar(
              tabs: [
                Tab(
                  icon: Icon(Icons.fiber_new),
                  text: '新闻',
                ),
                Tab(
                  icon: Icon(Icons.video_call),
                  text: '视频',
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Text('1'),
              Text('2')
            ],
          ),
        ),
      )

页面截图

3.使用ListView组件渲染页面

相关代码

ListView.builder(
                    itemCount: newsList.length,
                    itemBuilder: (BuildContext context, int index) {
    
    
                      return Column(
                        children: [
                          Card(
                            color: Colors.white,
                              margin: EdgeInsets.only(bottom: 10),
                              child: Column(
                                children: [
                                  Text(newsList[index]['title'],style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 20,
                                  ),),
                                  AspectRatio(
                                    aspectRatio: 16 / 9,
                                    child: Image.network(
                                      newsList[index]['imageUrl'],
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                ],
                              )),
                        ],
                      );
                    }),

页面截图