flutter 教程
参考地址：
codelabs.developers.google.com/codelabs/fl…
代码精读
? Tips：本代码来源于参考地址中的DartPad
main
其他关于flutter的不太了解，只是单纯看这个教程觉得整体语法上较好理解，widget is all you need。
首先最开始是一个主函数入口，这里需要执行一个runApp的函数，里面放的是你自己的定义的app，当然也是一个widget。
void main() {
runApp(MyApp());
}
MyApp
第2行是继承了StatelessWidget的所有的key(详情参考下面或此文)，目的是为了减少代码量。
To avoid having to manually pass each parameter into the super invocation of a constructor, you can use super-initializer parameters to forward parameters to the specified or default superclass constructor.
为了避免手动将每个参数传递给构造函数的超级调用，您可以使用超级初始化器参数将参数转发到指定或默认的超类构造函数。
从第5行到17行都是在重写Widget的build的方法，这是每一个继承StatelessWidget类都需要写的。
build的返回类型决定了这个类的功能，当前这个是ChangeNotifierProvider，是Flutter状态管理的一部分， 可以在app的不同界面中共享应用程序的状态，这里使用的是ChangeNotifier，就是下面定义的MyAppState。
这里插入两个小概念：
- 短时状态：短时状态（有时也称 用户界面 (UI) 状态 或者 局部状态）是你可以完全包含在一个独立 widget 中的状态。
- 应用状态：如果你想在你的应用中的多个部分之间共享一个非短时的状态，并且在用户会话期间保留这个状态，我们称之为应用状态（有时也称共享状态）。
简而言之：短时状态只存在于statefulwidget里，而应用状态则可以被在应用过程被多个部分访问，需要长时间保留。
详细了解可以查看Flutter中文。
class MyApp extends StatelessWidget {
const MyApp({super.key}); // 继承所有的key
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => MyAppState(),
child: MaterialApp(
title: 'Namer App',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
),
home: MyHomePage(),
),
);
}
}
MyAppState
这里定义了需要被共享的信息，在这个项目中是历史记录，当前的单词，喜爱的词表。定义的函数里面加入了notifyListeners意味着当前的这次变更需要通知所有的监听者。
class MyAppState extends ChangeNotifier {
var current = WordPair.random();
var history = <WordPair>[];
GlobalKey? historyListKey;
void getNext() {
history.insert(0, current);
var animatedList = historyListKey?.currentState as AnimatedListState?;
animatedList?.insertItem(0);
current = WordPair.random();
notifyListeners();
}
var favorites = <WordPair>[];
void toggleFavorite([WordPair? pair]) {
pair = pair ?? current;
if (favorites.contains(pair)) {
favorites.remove(pair);
} else {
favorites.add(pair);
}
notifyListeners();
}
void removeFavorite(WordPair pair) {
favorites.remove(pair);
notifyListeners();
}
}
MyHomePage
这一部分的代码比较长，注释介绍了大概的细节，比较简单。
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedIndex = 0;
@override
Widget build(BuildContext context) {
var colorScheme = Theme.of(context).colorScheme; // 定义颜色主题为系统
Widget page; // 定义界面，通过seleteIndex的值来进行选择，这里默认为GeneratorPage
switch (selectedIndex) {
case 0:
page = GeneratorPage();
break;
case 1:
page = FavoritesPage();
break;
default:
throw UnimplementedError('no widget for $selectedIndex');
}
// The container for the current page, with its background color
// and subtle switching animation.
var mainArea = ColoredBox(
color: colorScheme.surfaceVariant,
child: AnimatedSwitcher( // 这里是动画切换，主要是左边的导航栏
duration: Duration(milliseconds: 200),
child: page,
),
);
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 450) {
// Use a more mobile-friendly layout with BottomNavigationBar
// on narrow screens.
return Column(
children: [
Expanded(child: mainArea),
SafeArea(
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Favorites',
),
],
currentIndex: selectedIndex,
onTap: (value) { // 根据当前的位置选择界面
setState(() {
selectedIndex = value;
});
},
),
)
],
);
} else { // 大屏下面的屏幕自适应
return Row(
children: [
SafeArea(
child: NavigationRail(
extended: constraints.maxWidth >= 600,
destinations: [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.favorite),
label: Text('Favorites'),
),
],
selectedIndex: selectedIndex,
onDestinationSelected: (value) {
setState(() {
selectedIndex = value;
});
},
),
),
Expanded(child: mainArea),
],
);
}
},
),
);
}
}
这里定义了一个具有短时状态的homePage，主要是因为我们有一个主界面切换的需要，需要对seletedIndex进行监听。
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
}
GeneratorPage
class GeneratorPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var appState = context.watch<MyAppState>();
var pair = appState.current;
IconData icon; // 判断当前词是否是favorites中的，如果是的话就替换icon
if (appState.favorites.contains(pair)) {
icon = Icons.favorite;
} else {
icon = Icons.favorite_border;
}
return Center(
child: Column( // 从上到下，排列children
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded( // 1. 显示HistoryListView()
flex: 3,
child: HistoryListView(),
),
SizedBox(height: 10),
BigCard(pair: pair), // 2. 显示BigCard
SizedBox(height: 10),
Row( // 3. 横线显示
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton.icon( // 3.1 like 按钮
onPressed: () {
appState.toggleFavorite();
},
icon: Icon(icon),
label: Text('Like'),
),
SizedBox(width: 10),
ElevatedButton( // 3.2 next 按钮
onPressed: () {
appState.getNext();
},
child: Text('Next'),
),
],
),
Spacer(flex: 2),
],
),
);
}
}
BigCard
class BigCard extends StatelessWidget {
const BigCard({
Key? key,
required this.pair,
}) : super(key: key);
final WordPair pair;
@override
Widget build(BuildContext context) {
var theme = Theme.of(context);
var style = theme.textTheme.displayMedium!.copyWith(
color: theme.colorScheme.onPrimary,
);
return Card( // 返回的是卡片类型
color: theme.colorScheme.primary,
child: Padding(
padding: const EdgeInsets.all(20),
child: AnimatedSize(
duration: Duration(milliseconds: 200),
// Make sure that the compound word wraps correctly when the window
// is too narrow.
child: MergeSemantics(
child: Wrap(
children: [
Text( // 这里将单词拆分成了两个部分，增强了表现效果。
pair.first,
style: style.copyWith(fontWeight: FontWeight.w200),
),
Text(
pair.second,
style: style.copyWith(fontWeight: FontWeight.bold),
)
],
),
),
),
),
);
}
}
FavoritesPage
class FavoritesPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var theme = Theme.of(context);
var appState = context.watch<MyAppState>();
if (appState.favorites.isEmpty) { // 判断favorites是否有内容
return Center(
child: Text('No favorites yet.'),
);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(30),
child: Text('You have '
'${appState.favorites.length} favorites:'),
),
Expanded(
// Make better use of wide windows with a grid.
child: GridView(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( //组件参数
maxCrossAxisExtent: 400,
childAspectRatio: 400 / 80,
),
children: [
for (var pair in appState.favorites)
ListTile(
leading: IconButton(
icon: Icon(Icons.delete_outline, semanticLabel: 'Delete'),
color: theme.colorScheme.primary,
onPressed: () {
appState.removeFavorite(pair);//删除方法
},
),
title: Text(
pair.asLowerCase,
semanticsLabel: pair.asPascalCase,
),
),
],
),
),
],
);
}
}
HistoryListView
class _HistoryListViewState extends State<HistoryListView> {
/// Needed so that [MyAppState] can tell [AnimatedList] below to animate
/// new items.
final _key = GlobalKey();
/// 这里使用了梯度进行渲染
/// Used to "fade out" the history items at the top, to suggest continuation.
static const Gradient _maskingGradient = LinearGradient(
// This gradient goes from fully transparent to fully opaque black...
colors: [Colors.transparent, Colors.black],
// ... from the top (transparent) to half (0.5) of the way to the bottom.
stops: [0.0, 0.5],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
);
@override
Widget build(BuildContext context) {
final appState = context.watch<MyAppState>();
appState.historyListKey = _key;
return ShaderMask(
shaderCallback: (bounds) => _maskingGradient.createShader(bounds),
// This blend mode takes the opacity of the shader (i.e. our gradient)
// and applies it to the destination (i.e. our animated list).
blendMode: BlendMode.dstIn,
child: AnimatedList(
key: _key,
reverse: true,
padding: EdgeInsets.only(top: 100),
initialItemCount: appState.history.length,
itemBuilder: (context, index, animation) {
final pair = appState.history[index];
return SizeTransition(
sizeFactor: animation,
child: Center(
child: TextButton.icon(
onPressed: () {
appState.toggleFavorite(pair);
},
icon: appState.favorites.contains(pair)
? Icon(Icons.favorite, size: 12)
: SizedBox(),
label: Text(
pair.asLowerCase,
semanticsLabel: pair.asPascalCase,
),
),
),
);
},
),
);
}
}
总结
整体的代码复现和了解其中的原理大概需要2～3小时。希望各位小伙伴耐心学习，接下来将自己做了一个TODO-LIST，毕竟写项目是最好的学习方式，之后写完会继续分享一下学习经验～
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
