Text
代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Wrap示例",
home: Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
// color: Colors.amber,
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text(
"Hello, Flutter!,Hello, Flutter!,Hello, Flutter!,Hello, Flutter!,Hello, Flutter!",
style: TextStyle(
color: Colors.blue,
fontSize: 30,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w900,
decoration: TextDecoration.underline,
decorationColor: Colors.orange,
decorationThickness: 2,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
),
);
}
}
效果图
Image
TextField
代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final TextEditingController _phoneController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Wrap示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Column(
children: [
TextField(
onChanged: (value) {
print(value);
},
onSubmitted: (value) {
print(value);
},
controller: _phoneController,
decoration: InputDecoration(
fillColor: Color.fromARGB(255, 245, 245, 222),
filled: true,
hintText: "请输入账号",
contentPadding: EdgeInsets.only(left: 20),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(25),
),
),
),
SizedBox(height: 10),
TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
fillColor: Color.fromARGB(255, 245, 245, 222),
filled: true,
hintText: "请输入密码",
contentPadding: EdgeInsets.only(left: 20),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(25),
),
),
),
SizedBox(height: 10),
Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(25),
),
child: TextButton(
onPressed: () {
print(
"username: ${_phoneController.text}, password: ${_passwordController.text}",
);
},
child: Text("登录", style: TextStyle(color: Colors.white, fontSize: 16)),
),
),
],
),
),
),
);
}
}
效果图
滚动组件
SingleChildScrollView
包裹一个子组件，让单个子组件具备滚动能力
代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Stack(
children: [
SingleChildScrollView(
controller: _controller,
child: Column(
children: List.generate(100, (index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index-Hello Flutter!"),
);
}),
),
),
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去底部", style: TextStyle(color: Colors.white)),
),
),
),
Positioned(
right: 10,
bottom: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去顶部", style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
);
}
}
效果图
ListView
ListView 代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Stack(
children: [
ListView(
controller: _controller,
children: List.generate(100, (index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index-Hello Flutter!"),
);
}),
),
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去底部", style: TextStyle(color: Colors.white)),
),
),
),
Positioned(
right: 10,
bottom: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去顶部", style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
);
}
}
效果图
ListView.builder 代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Stack(
children: [
ListView.builder(
controller: _controller,
itemCount: 100,
itemBuilder: (final BuildContext context, final int index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index-Hello Flutter!"),
);
},
),
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去底部", style: TextStyle(color: Colors.white)),
),
),
),
Positioned(
right: 10,
bottom: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去顶部", style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
);
}
}
ListView.separated 代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Stack(
children: [
ListView.separated(
controller: _controller,
itemCount: 100,
itemBuilder: (final BuildContext context, final int index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index-Hello Flutter!"),
);
},
separatorBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.only(right: 10, left: 10),
height: 10,
width: double.infinity,
color: Colors.yellow,
);
},
),
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去底部", style: TextStyle(color: Colors.white)),
),
),
),
Positioned(
right: 10,
bottom: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去顶部", style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
);
}
}
效果图
GridView
GridView.count 代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Stack(
children: [
GridView.count(
crossAxisCount: 3,
scrollDirection: Axis.vertical,
controller: _controller,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
children: List.generate(100, (index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index-Hello Flutter!"),
);
}),
),
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去底部", style: TextStyle(color: Colors.white)),
),
),
),
Positioned(
right: 10,
bottom: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去顶部", style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
);
}
}
GridView.extent 代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Stack(
children: [
GridView.extent(
scrollDirection: Axis.vertical,
controller: _controller,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
maxCrossAxisExtent: 100,
children: List.generate(100, (index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index"),
);
}),
),
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去底部", style: TextStyle(color: Colors.white)),
),
),
),
Positioned(
right: 10,
bottom: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去顶部", style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
);
}
}
GridView.builder 代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
MainPage({super.key});
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Stack(
children: [
GridView.builder(
scrollDirection: Axis.vertical,
controller: _controller,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 2
),
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index"),
);
},
),
Positioned(
right: 10,
top: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
_controller.position.maxScrollExtent,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去底部", style: TextStyle(color: Colors.white)),
),
),
),
Positioned(
right: 10,
bottom: 10,
child: GestureDetector(
onTap: () {
_controller.animateTo(
0,
duration: Duration(seconds: 1),
curve: Curves.fastLinearToSlowEaseIn,
);
},
child: Container(
height: 80,
width: 80,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red,
),
child: Text("去顶部", style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
);
}
}
CustomScrollView
代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatelessWidget {
const MainPage({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 300,
width: double.infinity,
alignment: Alignment.center,
color: Colors.blue,
child: Text(
"轮播图",
style: TextStyle(color: Colors.white, fontSize: 50),
),
),
),
SliverToBoxAdapter(child: SizedBox(height: 10)),
SliverPersistentHeader(delegate: _StickyType(), pinned: true),
SliverGrid.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
),
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index"),
);
},
),
],
),
),
),
);
}
}
class _StickyType extends SliverPersistentHeaderDelegate {
@override
Widget build(
final BuildContext context,
final double shrinkOffset,
final bool overlapsContent,
) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 100,
itemBuilder: (final BuildContext context, final int index) {
return Container(
margin: EdgeInsets.only(right: 10, left: 10),
width: 100,
height: 60,
alignment: Alignment.center,
color: Colors.blue,
child: Text("$index", style: TextStyle(color: Colors.white)),
);
},
);
}
@override
double get maxExtent => 60;
@override
double get minExtent => 40;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}
效果图
PageView
代码
import 'package:flutter/material.dart';
void main() {
runApp(MainPage());
}
class MainPage extends StatefulWidget {
const MainPage({super.key});
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int _currentIndex = 0;
final PageController _controller = PageController();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "示例",
home: Scaffold(
body: Container(
padding: EdgeInsets.all(20),
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 300,
width: double.infinity,
alignment: Alignment.center,
color: Colors.blue,
child: Stack(
children: [
PageView.builder(
controller: _controller,
itemCount: 10,
onPageChanged: (index) {
setState(() {
_currentIndex = index;
});
},
itemBuilder:
(final BuildContext context, final int index) {
return Container(
height: 300,
width: double.infinity,
alignment: Alignment.center,
color: Colors.blue,
child: Text(
"轮播图$index",
style: TextStyle(
color: Colors.white,
fontSize: 50,
),
),
);
},
),
Positioned(
bottom: 0,
right: 0,
left: 0,
child: Container(
height: 40,
margin: EdgeInsets.only(bottom: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(10, (index) {
return GestureDetector(
onTap: () {
_controller.animateToPage(
index,
duration: Duration(seconds: 1),
curve: Curves.linear,
);
setState(() {
_currentIndex = index;
});
},
child: Container(
height: 10,
width: 10,
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: _currentIndex == index
? Colors.red
: Colors.white,
borderRadius: BorderRadius.circular(10),
),
),
);
}),
),
),
),
],
),
),
),
SliverToBoxAdapter(child: SizedBox(height: 10)),
SliverPersistentHeader(delegate: _StickyType(), pinned: true),
SliverGrid.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
),
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.blue,
),
alignment: Alignment.center,
child: Text("$index"),
);
},
),
],
),
),
),
);
}
}
class _StickyType extends SliverPersistentHeaderDelegate {
@override
Widget build(
final BuildContext context,
final double shrinkOffset,
final bool overlapsContent,
) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 100,
itemBuilder: (final BuildContext context, final int index) {
return Container(
margin: EdgeInsets.only(right: 10, left: 10),
width: 100,
height: 60,
alignment: Alignment.center,
color: Colors.blue,
child: Text("$index", style: TextStyle(color: Colors.white)),
);
},
);
}
@override
double get maxExtent => 60;
@override
double get minExtent => 40;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}
