Flutter 组件的使用技巧及遇到的各种问题

本人使用flutter组件所遇到的问题及解决方案，仅供参考

 

 

//button 渐变颜色 圆角 间距
 Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40,vertical: 25),
              child: RaisedButton(
                onPressed: login,
                textColor: Colors.white,
                clipBehavior: Clip.hardEdge,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(22.0))),
                padding: const EdgeInsets.all(0.0),

                child: Container(
                  width: double.infinity,
                  height: 44,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Colors.deepOrangeAccent,
                        Colors.red,
                        Colors.redAccent,
                      ],
                    ),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 40,vertical: 10),
                  child: Container(
                      alignment: Alignment.center,
                      child: Text('立即申请',style: TextStyle(fontSize: 16),)),
                ),

              ),
            ),
 

 

 

 

==========================================================================================

 

//代替android的 边距 
new Container(height: 10.0,color: Colors.white,),
 new Padding(padding: EdgeInsets.symmetric(vertical: 5.0)),//代表上下间距
//字体超出最大宽度 省略
Container(//给Text外层套个Container设置下最大宽度
       width: 60,
       child: Text(
          '。。。',
       　　maxLines: 1,//最大显示行数
          overflow: TextOverflow.ellipsis,
       ),
 )

 

 

=============================================================================

 

 

实现圆角/圆形图片  的几种方式
1、圆角
很多时候我们需要给图片设置圆角，那么在flutter中是怎么实现的呢？有很多种方法可以实现，下面我举两个例子：
使用裁剪来实现图片圆角：

new ClipRRect(
  child: Image.network(
    imageUrl,
    scale: 8.5,
    fit: BoxFit.cover,
  ),
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(20),
    topRight: Radius.circular(20),
  ),
)

使用边框来实现图片圆角：

new Container(
  width: 120,
  height: 60,
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(10.0),
    image: DecorationImage(
        image: NetworkImage(imageUrl),
        fit: BoxFit.cover),
  ),
)

需要注意的是，使用边框实现的时候要注意设置 fit 属性，不然效果也是有问题的，当然了你还可以使用 Material 组件来实现，这个大家可以自己去尝试。
2、圆形
圆形图片用得最多的应该是头像之类的，这种同样有多种方式可以实现，下面我也举两个例子：
使用裁剪实现圆形图片：

new ClipOval(
    child: Image.network(
    imageUrl,
    scale: 8.5,
  ),
)

使用CircleAvatar来实现圆形图片：

new CircleAvatar(
  backgroundImage: NetworkImage(imageUrl),
  radius: 50.0,
)

 

+++++++++++++++++++++++++++++++++++++++++++++++++++

 

//跳转
 Navigator.push(context,
                  MaterialPageRoute(builder: (context) => LoginActivity()));

++++++++++++++++++++++++++++++++++++++++++++++++++    
                  

//解决弹出键盘报错 外层包裹
SingleChildScrollView

 

=====================================================

 

//给控件加点击事件，_onClick为定义的方法            
return Container(
      child: GestureDetector(
        onTap: _onClick,//写入方法名称就可以了，但是是无参的
        child: Text("dianji"),
      ),
    );    

=====================================================

 

//listview 嵌套 GridView 给GridView加标题
//嵌套问题  禁止滑动，解决报错问题
physics: new NeverScrollableScrollPhysics(),//增加
        shrinkWrap: true,//增加
        
        ListView.separated//添加分割线
        separatorBuilder: (BuildContext context, int index) {
          return new Divider(
            height: 1.0,
            color: Colors.grey,
          );
        },

=====================================================

代码持续更新