【flutter】flutter开发备忘

本帖是为了开发做的一个备忘,随时不定期更新。


获取设备宽高

1
2
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

开启android沉浸式

判断是否为安卓设备必须添加,要不然会导致ios崩溃。

1
2
3
4
5
6
7
8
9
// 输出渲染
void main() {
runApp(App());
if (Platform.isAndroid) {
// 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后,是为了在渲染后进行set赋值,覆盖状态栏,写在渲染之前MaterialApp组件会覆盖掉这个值。
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}

AppBar标题居中和去掉AppBar下侧阴影

1
2
3
4
5
6
7
Widget _tabbar(BuildContext context) {
return AppBar(
...
centerTitle: true, // 标题居中
elevation: 0.0, // 去掉appbar下面的阴影
);
}

有状态组件一定要使用createState

1
2
3
4
5
6
7
8
9
10
class HomeScreen extends StatefulWidget {
const HomeScreen();

@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
// 使用TickerProvider 记得加 with SingleTickerProviderStateMixin 不然会报错
}

使用ios的动画交互 和 MaterialApp 主题颜色配置不生效的问题

检查是否存在子级MaterialApp。如果有子级MaterialApp请删除,保证全局只有一个MaterialApp,theme就会生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class App extends StatelessWidget {
final store = createStore();
// App();

@override
Widget build(BuildContext context) {
return StoreProvider<AppState>(
store: createStore(),
child: MaterialApp(
theme: ThemeData(
platform: TargetPlatform.iOS, // 使用ios的界面动画方式
primaryColor: Colors.red, // 应用主要部分的背景颜色(工具栏,标签栏等)
accentColor: Colors.red, // 前景色:旋钮,文本,过度滚动边缘效果等
),
routes: <String, WidgetBuilder>{
'/': (BuildContext context) => HomeScreen(),
},
),
);
}
}

使用ListView.builder 出现无限加载的问题,和debug报错的问题。

报错是因为视窗builder的item加五个之后,超出了数据list的长度,造成了下标越界。

无限加载是因为,没有限制render长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (BuildContext context, int index) {
print(index);
if (index < _suggestions.length) { // 加判断,动态render的下标小于输出的长度才render
return _listViewItem('$index');
}
},
),
);
}

本文作者: haise
本文地址https://www.shifeng1993.com/2018/07/12/flutter_dev/
版权声明: 转载请注明出处!