阅读 335

[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),),
        ]
    );复制代码