页面展示
部分代码
```dart
import 'package:flutter/material.dart';
import 'package:dots_indicator/dots_indicator.dart';
import 'dart:async';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'date.dart';
import 'package:flutter/services.dart';
import 'dart:convert';
import 'search.dart';
import 'firelevel.dart';
import 'firesafety.dart';
import 'message.dart';
import 'first.dart';
import 'second.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final List<String> imageUrls = [
'https://img95.699pic.com/photo/40070/3000.jpg_wh860.jpg',
'https://img95.699pic.com/photo/40081/7780.jpg_wh860.jpg',
'https://img-u-3.51miz.com/preview/muban/00/00/52/30/M-523031-46D08D28.jpg-0.jpg',
];
final PageController _pageController = PageController();
int _currentPage = 0;
Timer? _timer;
bool _forward = true;
void initState() {
super.initState();
_startAutoPlay();
}
void dispose() {
_timer?.cancel();
super.dispose();
}
void _startAutoPlay() {
_timer = Timer.periodic(Duration(seconds: 3), (timer) {
if (_forward) {
if (_currentPage < imageUrls.length - 1) {
_currentPage++;
} else {
_currentPage = 0;
}
} else {
if (_currentPage > 0) {
_currentPage--;
} else {
_currentPage = imageUrls.length - 1;
}
}
_pageController.animateToPage(
_currentPage,
duration: Duration(milliseconds: 500),
curve: Curves.ease,
);
});
}
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // 隐藏调试模式下的"DEBUG"标识
home: Scaffold(
backgroundColor: Colors.black12, // 设置页面的背景颜色
body: SingleChildScrollView(
child: Column(children: [
SizedBox(
height: 20,
),
Container(
height: 50,
width: 380,
decoration: BoxDecoration(
color: Colors.white, // 设置搜索框的背景颜色为白色
borderRadius: BorderRadius.circular(40),
border: Border.all(color: Colors.black12, width: 1),
),
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: '请输入搜索关键词',
prefixIcon: Icon(Icons.search),
border: InputBorder.none,
),
onChanged: (value) {
// 在这里处理搜索逻辑，根据输入的关键词过滤显示的列表项
},
),
),
TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
// 在这里处理点击文本按钮的逻辑
},
child: Text('搜索'),
),
SizedBox(
width: 5,
),
],
),
),
const SizedBox(height: 10),
ScrollingInfoBar(),
Container(
decoration: BoxDecoration(
//color: Colors.white, // 设置背景颜色为白色
//border: Border.all(color: Colors.black12, width: 1),
borderRadius: BorderRadius.circular(40),
),
height: 200,
child: Stack(
children: [
PageView.builder(
controller: _pageController,
scrollDirection: Axis.horizontal,
itemCount: imageUrls.length,
itemBuilder: (context, index) {
return Container(
height: 200,
width: double.infinity,
decoration: BoxDecoration(
//color: Colors.white, // 设置背景颜色为白色
//border: Border.all(color: Colors.black12, width: 1),
borderRadius: BorderRadius.circular(40),
),
child: Image.network(
imageUrls[index],
fit: BoxFit.cover,
),
);
},
onPageChanged: (index) {
setState(() {
_currentPage = index;
});
},
),
Align(
alignment: Alignment.bottomCenter,
child: DotsIndicator(
dotsCount: imageUrls.length,
position: _currentPage.round(),
decorator: const DotsDecorator(
color: Colors.grey, // 未选中点的颜色
activeColor: Colors.blue, // 选中点的颜色
),
),
),
],
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SearchPage()),
);
},
child: Column(
children: [
Container(
height: 55,
width: 55,
decoration: BoxDecoration(
color: Colors.red,
border:
Border.all(color: Colors.black12, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Icon(
Icons.phone,
size: 30,
color: Colors.white,
),
),
SizedBox(
height: 10,
),
Text(
'紧急SOS',
style: TextStyle(color: Colors.black, fontSize: 16),
),
],
),
),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FireSafetyPage()),
);
},
child: Column(
children: [
Container(
height: 55,
width: 55,
decoration: BoxDecoration(
color: Colors.yellow,
border:
Border.all(color: Colors.black12, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Icon(
Icons.message,
size: 30,
color: Color.fromARGB(255, 217, 146, 230),
),
),
SizedBox(
height: 10,
),
Text(
'紧急MSM',
style: TextStyle(color: Colors.black, fontSize: 16),
),
],
),
),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FireSafetyPage()),
);
},
child: Column(
children: [
Container(
height: 55,
width: 55,
decoration: BoxDecoration(
color: Colors.green,
border:
Border.all(color: Colors.black12, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Icon(
Icons.save_as,
size: 30,
color: Colors.white,
),
),
SizedBox(
height: 10,
),
Text(
'消防科普',
style: TextStyle(color: Colors.black, fontSize: 16),
),
],
),
),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FireLevelPage()),
);
},
child: Column(
children: [
Container(
height: 55,
width: 55,
decoration: BoxDecoration(
color: Colors.orange,
border:
Border.all(color: Colors.black12, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Icon(
Icons.announcement,
size: 30,
color: Colors.white,
),
),
SizedBox(
height: 10,
),
Text(
'等级评判',
style: TextStyle(color: Colors.black, fontSize: 16),
),
],
),
),
// Repeat the above pattern for the remaining containers
],
),
const SizedBox(height: 10), // 设置组件与组件之间的垂直间隔
Container(
color: Colors.white10,
child: MasonryGridView.count(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
itemCount: yourDataList.length,
shrinkWrap: true, //收缩，让元素宽度自适应
physics: NeverScrollableScrollPhysics(), //禁止左右滑动
itemBuilder: (context, index) {
// var height=50+150*Random().nextDouble(); //0.0--1.0
return GestureDetector(
onTap: () {
// 根据索引值决定跳转到不同的页面
if (index == 0) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FirstPage()),
);
} else if (index == 1) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage()),
);
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MessagePage()),
);
}
},
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 1),
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Column(
children: [
Container(
padding: EdgeInsets.all(10),
child: Image.network(
yourDataList[index]["imageUrl"],
fit: BoxFit.cover,
),
),
Container(
width: double.infinity,
child: Text(
yourDataList[index]["title"],
style: TextStyle(fontSize: 12),
),
),
SizedBox(
height: 5,
),
Row(
children: [
CircleAvatar(
radius: 15, // 设置头像的半径大小
backgroundImage: NetworkImage(
yourDataList[index]["avatarUrl"]),
),
SizedBox(
width:
10), // Add some spacing between avatar and image
Expanded(
child:
Text(yourDataList[index]["nickname"]),
),
],
),
],
),
),
);
}),
),
]),
)));
}
}
// 滚动消息基类
class ScrollingInfoBar extends StatefulWidget {
_ScrollingInfoBarState createState() => _ScrollingInfoBarState();
}
// 滚动消息子类
class _ScrollingInfoBarState extends State<ScrollingInfoBar> {
// 滚动信息
List<Map<String, dynamic>> infoList = [];
Future<void> _loadInfoList() async {
String jsonString = await rootBundle
.loadString('assets/message/rolling_topic_images/rolling_topic.json');
List<dynamic> jsonList = jsonDecode(jsonString);
List<Map<String, dynamic>> loadedList =
List<Map<String, dynamic>>.from(jsonList);
setState(() {
infoList = loadedList;
});
}
int currentIndex = 1; // 当前显示的信息索引
// 滚动状态
late ScrollController _scrollController;
late Timer _timer;
// 重写 StatefulWidget 的生命周期方法 initState()
void initState() {
super.initState();
_loadInfoList();
print(infoList);
// 控制滚动条的位置和行为
_scrollController = ScrollController();
// 设置定时器，每隔几秒切换一次信息
_timer = Timer.periodic(const Duration(seconds: 2), (timer) {
// 每隔指定的时间执行一次回调函数
if (mounted) {
setState(() {
currentIndex = (currentIndex + 1) % infoList.length;
_scrollToIndex(currentIndex);
});
}
});
}
void dispose() {
_timer.cancel(); // 页面销毁时取消定时器
_scrollController.dispose();
super.dispose();
}
// 滚动到指定的索引位置
void _scrollToIndex(int index) {
if (index == 0) {
currentIndex = 1;
_scrollController.animateTo(
// 滚动的目标位置
40.0, // 每个信息项的高度假设为40，可以根据实际情况调整
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
);
} else {
_scrollController.animateTo(
// 滚动的目标位置
index * 40.0, // 每个信息项的高度假设为40，可以根据实际情况调整
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
);
}
// 控制 ListView 或 ScrollView 的滚动行为。
}
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 15),
child: Container(
height: 40, // 长条框的高度
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5), // 设置圆角半径为10
color: Colors.white, // 设置Container的背景颜色为蓝色
),
child: ListView.builder(
controller: _scrollController,
itemCount: infoList.length,
itemBuilder: (context, index) {
return SizedBox(
height: 40,
child: Row(
children: [
const SizedBox(
width: 10,
),
// 图片
Padding(
padding: const EdgeInsets.fromLTRB(0, 3, 0, 0),
child: Image.asset(
infoList[index]['imagePath'],
width: 27,
height: 27,
fit: BoxFit.cover,
),
),
const SizedBox(
width: 8,
),
Container(
width: 250,
child: Text(
infoList[index]['text'],
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: const TextStyle(fontSize: 15),
),
),
],
),
);
},
),
),
);
}
}
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
