Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考 (2)

实现方式二：

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFFF0F1F0), body: Center( child: _buildWidget(), ), ), ); } Widget _buildWidget() { return Container( child: Column( children: <Widget>[ Expanded( flex: 1, child: Container(), ), Image.asset('assets/images/refresh.png', width: 49, height: 44,), SizedBox( height: 42.0, ), FlatButton( padding: const EdgeInsets.symmetric(horizontal: 50.0), //注意这里 alpha 最大值是 255， sketch 上面最大值是 100 color: Color.fromARGB(255, 13, 46, 172), //这里 onPressed 不能为 null，如果写 null 会怎样，大家可以试下~ onPressed: (){}, child: Text( //演示而已，实际开发需要多语言 '刷新', style: TextStyle( color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600 ), ) ), Expanded( flex: 1, child: Container(), ), ], ), ); } }

效果如下：

其实，看到上面用到的 Column，我们可以直接利用上次说到的一个属性，就可以很巧妙的实现适配。

实现方式三：

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Color(0xFFF0F1F0), body: Center( child: _buildWidget(), ), ), ); } Widget _buildWidget() { return Container( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Image.asset( 'assets/images/refresh.png', width: 49, height: 44, ), SizedBox( height: 42.0, ), FlatButton( padding: const EdgeInsets.symmetric(horizontal: 50.0), //注意这里 alpha 最大值是 255， sketch 上面最大值是 100 color: Color.fromARGB(255, 13, 46, 172), //这里 onPressed 不能为 null，如果写 null 会怎样，大家可以试下~ onPressed: () {}, child: Text( //演示而已，实际开发需要多语言 '刷新', style: TextStyle( color: Colors.white, fontSize: 12, fontWeight: FontWeight.w600), )), ], ), ); } }

效果如下：

其中实现方式一只是说明，实际开发不推荐。

实现方式二和实现方式三都可以，推荐方式三。