[Flutter Widget] 使用过程常见的问题(一)

一、前言

笔者通过对flutter widget的一些学习，组合一起使用得多，遇到的问题可能会相应的增加，为此，在这里分享了一些使用过程遇到的问题，希望能够帮助到各位。

二、TextField 输入框组件

出现的问题:

在使用时，点击了TextField输入框之后，界面显示了超出或者有黄色警告条的提示信息等。

(在此不放效果图)

解决方案：

在TextField 外层包裹一层SingleChildScrollView，这样输入法键盘打开时输入框可以上移，即解决，出现同样的情况也可以通过这个方法尝试解决。

三、Column 与ListView 组件

出现的问题：

想要用Column组件包裹ListView组件时，出现了页面空白异常。

Container(
    height: 300, 
    color: Colors.blue, 
    child: 
        Column(
            children: <Widget>[ 
                    ListView.builder(
                          padding: EdgeInsets.all(5.0),
                          itemExtent: 50.0, 
                          itemBuilder: (BuildContext context,int index){
                          return Text("text $index");   
                       },     
                     ),
                    ],  
                   ),
                   ),

数据显示空白

解决方案：

在ListView外层包裹一层Expanded组件。

例：

Container(
    height: 300, 
    color: Colors.blue, 
    child: 
        Column(
            children: <Widget>[
              Expanded(        
                child: ListView.builder(
                          padding: EdgeInsets.all(5.0),
                          itemExtent: 50.0, 
                          itemBuilder: (BuildContext context,int index){
                          return Text("text $index");   
                       },  
                      ),     
                     ),
                    ],  
                   ),
                   ),

四、ListView 组件

出现的问题：

垂直ListView嵌套水平ListView时报错'constraints.hasBoundedHeight': is not true.' 或者不显示。

解决方案：

ListView => Container => 水平ListView

由Container 组件来约束宽高，在水平ListView外层包裹一个Container 设置宽高比例即可

五、CupertinoPicker 组件

出现的问题：

想让CupertinoPicker 组件内容项拥有控制滑动的效果。

解决方案：

为CupertinoPicker这个控件设置索引，能让它根据索引选择到具体的项,一般滑动都是通过controller控制的，controller拥有控制滑动的功能，

具体使用方法：

...
class _DemoPageState extends State<SuperMasterPage> {
  ScrollController _controller = new FixedExtentScrollController(
    initialItem: 1
  );
...
...
final picker  = CupertinoPicker( //在定义控制时，使用控制它
      scrollController: _controller,
        itemExtent: 40,
        backgroundColor: Colors.white,
        onSelectedItemChanged: (position){
          print('The position is $position');
          mDefaultPosition = position;
        },
        children: [
          Text("abc",style: TextStyle(fontSize: 20,color: Colors.black),),
          Text("123",style: TextStyle(fontSize: 20,color: Colors.black),),
          Text("cba",style: TextStyle(fontSize: 20,color: Colors.black),),
        ]
    );