Flutter完整开发实战详解(三、打包与填坑篇)_ 掘金技术征文(1)

最新推荐文章于 2024-10-08 12:07:29 发布

2401_84520457

最新推荐文章于 2024-10-08 12:07:29 发布

阅读量710

点赞数 14

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84520457/article/details/138359586

版权

程序员专栏收录该内容

171 篇文章 1 订阅

订阅专栏

Issue#18305 真实的解决了这个问题，居然是因为 Pod 的工程没引入：

open ios/Runner.xcodeproj

I checked Runner/Pods is empty in Xcode sidebar.

drop Pods/Pods.xcodeproj into Runner/Pods.

“Valid architectures” to only “arm64” (I removed armv7 armv7s)

最后终于成功打包，心累啊(///▽///)。同时如果希望直接在真机上调试 Flutter，可以参考 :《Flutter基础—开发环境与入门》下的 iOS 真机部分。

二、细节

这里主要讲一些小细节

1、AppBar

在 Flutter 中 AppBar 算是常用 Widget ，而 AppBar 可不仅仅作为标题栏和使用，AppBar上的 leading 和 bottom 同样是有用的功能。

AppBar 的 bottom 默认支持 TabBar, 也就是常见的顶部 Tab 的效果，这其实是因为TabBar 实现了 PreferredSizeWidget 的 preferredSize。所以只要你的控件实现了 preferredSize，就可以放到 AppBar 的 bottom 中使用。比如下图搜索栏，这是TabView下的页面又实用了AppBar。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

leading ：通常是左侧按键，不设置时一般是 Drawer 的图标或者返回按钮。
flexibleSpace ：位于 bottom 和 leading 之间。

2、按键

Flutter 中的按键，如 FlatButton 默认是否有边距和最小大小的。所以如果你想要无 padding、margin、border 、默认大小 等的按键效果，其中一种方式如下：

///
new RawMaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: padding ?? const EdgeInsets.all(0.0),
constraints: const BoxConstraints(minWidth: 0.0, minHeight: 0.0),
child: child,
onPressed: onPressed);

如果在再上 Flex ，如下所示，一个可控的填充按键就出来了。

new RawMaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: padding ?? const EdgeInsets.all(0.0),
constraints: const BoxConstraints(minWidth: 0.0, minHeight: 0.0),
///flex
child: new Flex(
mainAxisAlignment: mainAxisAlignment,
direction: Axis.horizontal,
children: [],
),
onPressed: onPressed);

3、StatefulWidget 赋值

这里我们以给 TextField 主动赋值为例，其实 Flutter 中，给有状态的 Widget 传递状态或者数据，一般都是通过各种 controller 。如 TextField 的主动赋值，如下代码所示：

final TextEditingController controller = new TextEditingController();

@override
void didChangeDependencies() {
super.didChangeDependencies();
///通过给 controller 的 value 新创建一个 TextEditingValue
controller.value = new TextEditingValue(text: “给输入框填入参数”);
}

@override
Widget build(BuildContext context) {
return new TextField(
///controller
controller: controller,
onChanged: onChanged,
obscureText: obscureText,
decoration: new InputDecoration(
hintText: hintText,
icon: iconData == null ? null : new Icon(iconData),
),
);
}

其实 TextEditingValue 是 ValueNotifier，其中 value 的 setter 方法被重载，一旦改变就会触发 notifyListeners 方法。而 TextEditingController 中，通过调用 addListener 就监听了数据的改变，从而让UI更新。

当然，赋值有更简单粗暴的做法是：传递一个对象 class A 对象，在控件内部使用对象 A.b 的变量绑定控件，外部通过 setState({ A.b = b2}) 更新。

4、GlobalKey

在Flutter中，要主动改变子控件的状态，还可以使用 GlobalKey。比如你需要主动调用 RefreshIndicator 显示刷新状态，如下代码所示。

GlobalKey refreshIndicatorKey;

showForRefresh() {
///显示刷新
refreshIndicatorKey.currentState.show();
}

@override
Widget build(BuildContext context) {
refreshIndicatorKey = new GlobalKey();
return new RefreshIndicator(
key: refreshIndicatorKey,
onRefresh: onRefresh,
child: new ListView.builder(
///·····
),
);
}

5、Redux 与主题

使用 Redux 来做 Flutter 的全局 State 管理最合适不过，由于Redux内容较多，如果感兴趣的可以看看篇章二，这里主要通过 Redux 来实现实时切换主题的效果。

如下代码，通过 StoreProvider 加载了 store ，再通过 StoreBuilder 将 store 中的 themeData 绑定到 MaterialApp 的 theme 下，之后在其他 Widget 中通过 Theme.of(context) 调你需要的颜色，最终在任意位置调用 store.dispatch 就可实时修改主题，效果如后图所示。

class FlutterReduxApp extends StatelessWidget {
final store = new Store(
appReducer,
initialState: new GSYState(
themeData: new ThemeData(
primarySwatch: GSYColors.primarySwatch,
),
),
);

FlutterReduxApp({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
/// 通过 StoreProvider 应用 store
return new StoreProvider(
store: store,
///通过 StoreBuilder 获取 themeData
child: new StoreBuilder(builder: (context, store) {
return new MaterialApp(
theme: store.state.themeData,
routes: {
HomePage.sName: (context) {
return HomePage();
},
});
}),
);
}
}