FlutterFlutter

Flutter-基础组件二

2020-09-27  本文已影响0人  葱花思鸡蛋
1.基本组件

1）Text 文本组件

Text('首页',style:TextStyle(
      //颜色
      color:Colors.orange,
      //字体大小
      fontSize:20,
      //字体加粗
      fontWeight: FontWeight.bold,
    ))


TextStyle 属性设置：
TextStyle({
    this.inherit = true,
    this.color,//文本样式
    this.fontSize,//字体大小
    this.fontWeight,//绘制文本时的字体粗细
    this.fontStyle,//字体变体
    this.letterSpacing,//水平字母之间的空间间隔(逻辑像素为单位),可以负值
    this.wordSpacing,//单词之间添加的空间间隔(逻辑像素为单位),可以负值
    this.textBaseline,//对齐文本的水平线
    this.height,//文本行与行的高度,作为字体代销的倍数
    this.locale,//用于选择区域定字形的语言环境
    this.foreground,//文本的前景色，不能与color共同设置
    this.background,//文本背景色
    this.shadows,//Flutter Decoration背景设定(边框，圆角，阴影,渐变等)
    this.decoration,//绘制文本装饰，添加上下划线，删除线
    this.decorationColor,//文本装饰的颜色
    this.decorationStyle,//文本装饰的样式，控制画虚线，点，波浪线
    this.debugLabel,
    String fontFamily,//使用字体的名称
    String package,
  })

2）RichText 富文本

常用属性：

RichText(
 text:TextSpan(
     text: '你是猪吗',
     style: TextStyle(color: Colors.black, fontSize: 18.0),
     recognizer: TapGestureRecognizer()..onTap=(){
       print('你点击了\'你是猪吗\'');
     },
     children: [
       TextSpan(text: '滚',style: TextStyle(color: Colors.orange, fontSize: 18.0)),
       TextSpan(text: '你才是',style: TextStyle(color: Colors.blue, fontSize: 18.0)),
       TextSpan(text: '猪',style: TextStyle(color: Colors.green, fontSize: 18.0))
     ]
 )
)

TextSpan 属性：

TextSpan({
    this.text, //文本
    this.children, // TextSpan数组
    TextStyle style,// 文本样式
    this.recognizer,// 设置识别手势
    this.semanticsLabel,// 文本的语义
  })

3）textfield 文本输入框

常用属性：

final editController = TextEditingController();

TextField(
    controller: editController,
    keyboardType: TextInputType.phone,
    maxLength: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
    maxLines: 1,//最大行数
    autocorrect: true,//是否自动更正
    autofocus: true,//是否自动对焦
    //      obscureText: true,//是否是密码
    textAlign: TextAlign.left,//文本对齐方式
    style: TextStyle(fontSize: 15.0, color: Colors.blue,height: 30),//输入文本的样式
    inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
    onChanged:(value){
      print('输入内容 = $value');
    },
    onSubmitted:(value){
      print('提交的内容 = $value');
    }
),

4）Button 按钮

RaisedButton(
  child: Text("normal"),
  onPressed: () {
    print('Raise按钮被点击了');
  },
);
FlatButton(
  child: Text("normal"),
  onPressed: () {
    print('Flat按钮被点击了');
  },
)

OutlineButton(
  child: Text("normal"),
  onPressed: () {
    print('Outline按钮被点击了');
  },
)

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('icon按钮被点击了'); 
  },
)

5）Image 图片

先在pubspec.yaml中配置图片路径,新建一个images文件夹与lib同级，用来存放图片资源。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
   - images/    // 默认1.0x图片，声明images下的所有图片但不包含子文夹下的图片
   - images/home/wish.png // 声明具体的某张图片，可以不需要配置这么具体
   - images/home/       // 声明home文件下的所有图片
   - images/2.0x/       // 声明2倍图中的所有图片
   - images/3.0x/
   - images/xianbao.png  // 声明1倍图中没有但2倍3倍图中有的图片

在images文件夹下创建2.0x和3.0x文件夹存放2x，3x图片。flutter中会首先根据系统的devicePixelRatio，来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。

images/ 默认存放的是1.0x的图片，若1倍图中没有要声明的图片，想要直接自适应2倍图和3倍图，要单独进行声明，但不需要带2.0x,和3.0x,系统会自动按分辨率从低到的顺序去选择。

1.0x、2.0x、3.0x 文件名保持一致。

不需要配置完整路径，配置到图片所在文件夹即可，不然几百张图片每张图片配置一个路径不是要累死。

// 第一种方式创建Image
Image.asset('images/juren.jpeg',width: 200,height: 200,),
Image.asset('images/xianbao.png',width: 50,height: 50,),
// 加载网络图片
Image.network('http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg',width: 200,height: 300,),
// 第二种方式创建Image
Image(image: AssetImage('images/home/wish.png'),width: 50,height: 50,)

属性fit:

6）CircleAvatar

源码：

 const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,
    this.backgroundImage,
    this.foregroundColor,//前景色，
    this.radius,
    this.minRadius,
    this.maxRadius,
   })

示例：

//圆行图片
Align(
  child: CircleAvatar(
    backgroundImage: NetworkImage(
        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
    backgroundColor: Color(0xffff0000),
    radius: 40.0,
  ),
)


Align(
  child: ClipOval(
    child: SizedBox(
      width: 80.0,
      height: 80.0,
      child: Image.network(
        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
        fit: BoxFit.fill,),
    ),
  ),
),
Align(
    child: Container(
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          fit: BoxFit.fill,
          image: NetworkImage(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
          ),
        ),
      ),
    )
),

注意：

7）Icon 字体图库

Flutter 中，也可以使用iconfont。iconfont和图片相比它的优势：


 const Icon(
    this.icon, {   
    Key key,
    this.size,           //大小
    this.color,          //颜色
    this.semanticLabel,  //语义标签
    this.textDirection,  //icon文字方向
  }) 


final Map bottomMap ={
    "首页":Icon(Icons.home),
    "朋友圈":Icon(Icons.camera),
    "信息":Icon(Icons.message),
    "其他":Icon(Icons.devices_other),
  };

8）Checkbox 复选框

常用属性：

Checkbox(
  value: _checkValue,
  activeColor: Colors.red,
  onChanged: (value){
    setState(() {
      _checkValue = value;
    });
    print("checkBox value changed");
  },),

9）Switch 开关

常用属性：

Switch(
  value: _switchValue,
  activeColor:Colors.blue ,
  onChanged: (value){
    setState(() {
      _switchValue = value;
    });
})
2.列表组件和网格组件

1）ListView

常用的构造方式：

常用属性：

示例:

class ListViewWidget extends StatelessWidget{

  final List listData=[
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/1.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/2.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/3.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/4.png"
    },{
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/5.png"
    }
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: listData.length,
      itemExtent: 120,
      itemBuilder: (BuildContext context,int index){
      return Container(
        child:Row(
          children: [
            Image.network(listData[index]['imageUrl'],width: 100,height: 100,),
            Column(
             children: [
               Text(listData[index]['title']),
               Text(listData[index]['author']),
             ],
            )
          ],
        ) ,
      );
    },);
  }

}




/*

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(
      itemCount: listData.length,
      separatorBuilder: (BuildContext context,int index){
        return Divider(height: 1.0, color: Colors.blue);
      },
      itemBuilder: (BuildContext context,int index){
      return Container(
        child:Row(
          children: [
            Image.network(listData[index]['imageUrl'],width: 100,height: 100,),
            Column(
             children: [
               Text(listData[index]['title']),
               Text(listData[index]['author']),
             ],
            )
          ],
        ) ,
      );
    },);
  }

**/

2）GridView

常用属性：

gridDelegate 用来控制子Widget如何进行布局,它有如下两个实现类：

const SliverGridDelegateWithMaxCrossAxisExtent({
    @required this.maxCrossAxisExtent, //子控件的最大宽度，实际宽度是根据交叉轴的值进行平分，也就是说最大宽度并不一定是实际宽度，很有可能子控件的实际宽度要小于设置的最大宽度
    this.mainAxisSpacing = 0.0, //主轴之间的间距
    this.crossAxisSpacing = 0.0,//交叉轴之间的间距
    this.childAspectRatio = 1.0,//子控件的宽高比
  }

子控件的个数实际上就是交叉轴的最大宽度除以我们设置的最大值得出的值，如果该值为整数，那个该值就是子控件的个数，如果不是整数，那么就舍掉小数点后面的值加上一后就是子控件的个数。

const SliverGridDelegateWithFixedCrossAxisCount({
    @required this.crossAxisCount,  //交叉轴上子控件的个数
    this.mainAxisSpacing = 0.0,
    this.crossAxisSpacing = 0.0,
    this.childAspectRatio = 1.0,
  })

示例：

class GridViewWidget extends StatelessWidget{


  @override
  Widget build(BuildContext context) {

    return GridView.builder(gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
//        maxCrossAxisExtent:100,
        crossAxisCount:3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10

    ),
      itemCount:20,
      itemBuilder:(BuildContext context, int index){
      return Container(
        color: Colors.orange,
        child: Center(
          child: Text('item $index',style: TextStyle(backgroundColor:Colors.blue,color: Colors.white),),
        ),
      );
    });
  }

}
上一篇下一篇

猜你喜欢

热点阅读