526互联

前端开发_6-Flutter-组件学习1

发布时间 2023-08-10 13:04:47作者: cactus9

目录

前言

一、Text

Text Text(
  String data, //文本
  {Key? key,
  TextStyle? style,//文本样式
  StrutStyle? strutStyle,
  TextAlign? textAlign,//文本对齐方式
  TextDirection? textDirection,//文本方向
  Locale? locale,
  bool? softWrap,
  TextOverflow? overflow,//文本溢出样式
  double? textScaleFactor,//文本比例
  int? maxLines,//最大行
  String? semanticsLabel,//语义标签
  TextWidthBasis? textWidthBasis,
  TextHeightBehavior? textHeightBehavior,
})
//style的属性
(const) TextStyle TextStyle({
  bool inherit = true,//若为false,则样式为白色，字体大小为10像素，无衬线字体
  Color? color,//字体颜色
  Color? backgroundColor,//字体背景颜色
  double? fontSize,//字体大小
  FontWeight? fontWeight,//字体粗细
  FontStyle? fontStyle,//字体样式（斜体，等等）
  double? letterSpacing,//字母间隔
  double? wordSpacing,
  TextBaseline? textBaseline,
  double? height,
  TextLeadingDistribution? leadingDistribution,
  Locale? locale,
  Paint? foreground,
  Paint? background,
  List<Shadow>? shadows,
  List<FontFeature>? fontFeatures,
  TextDecoration? decoration,
  Color? decorationColor,//下划线颜色
  TextDecorationStyle? decorationStyle,
  double? decorationThickness,
  String? debugLabel,
  String? fontFamily,
  List<String>? fontFamilyFallback,
  String? package,
  TextOverflow? overflow,//文本溢出样式
})

二、Container

(new) Container Container({
  Key? key,
  AlignmentGeometry? alignment,//内容位置
  EdgeInsetsGeometry? padding,
  Color? color,
  Decoration? decoration,//边框样式
  Decoration? foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  EdgeInsetsGeometry? margin,
  Matrix4? transform,//移动矩阵
  AlignmentGeometry? transformAlignment,
  Widget? child,//组件
  Clip clipBehavior = Clip.none,
})
(new) BoxDecoration BoxDecoration({
  Color? color,
  DecorationImage? image,
  BoxBorder? border,
  BorderRadiusGeometry? borderRadius,
  List<BoxShadow>? boxShadow,
  Gradient? gradient,
  BlendMode? backgroundBlendMode,
  BoxShape shape = BoxShape.rectangle,
})
 decoration: BoxDecoration(
            color: Colors.blue,
            border: Border.all(color: Colors.red, width: 2.0),
            borderRadius: const BorderRadius.all(
              //  Radius.circular(150),    //圆形
              Radius.circular(10),
            )),

三、Image

(new) Image Image.network(
  String src, {
  Key? key,
  double scale = 1.0,
  Widget Function(BuildContext, Widget, int?, bool)? frameBuilder,
  Widget Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder,
  Widget Function(BuildContext, Object, StackTrace?)? errorBuilder,
  String? semanticLabel,
  bool excludeFromSemantics = false,
  double? width,
  double? height,
  Color? color,
  Animation<double>? opacity,
  BlendMode? colorBlendMode,
  BoxFit? fit,
  AlignmentGeometry alignment = Alignment.center,
  ImageRepeat repeat = ImageRepeat.noRepeat,
  Rect? centerSlice,
  bool matchTextDirection = false,
  bool gaplessPlayback = false,
  FilterQuality filterQuality = FilterQuality.low,
  bool isAntiAlias = false,
  Map<String, String>? headers,
  int? cacheWidth,
  int? cacheHeight,
})
Center(
      child: Container(
          height: 300,
          width: 300,
          child: Image.network(
            'https://profile.csdnimg.cn/F/7/3/3_joyyi9',
            fit: BoxFit.cover,
          )),
    );
    
//圆形图片
(new) BoxDecoration BoxDecoration({
  Color? color,
  DecorationImage? image,
  BoxBorder? border,
  BorderRadiusGeometry? borderRadius,
  List<BoxShadow>? boxShadow,
  Gradient? gradient,
  BlendMode? backgroundBlendMode,
  BoxShape shape = BoxShape.rectangle,
})
 Center(
        child: Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
          color: Colors.yellow,
          // borderRadius: BorderRadius.all(
          //   Radius.circular(150),
          // )
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
              image: NetworkImage("https://profile.csdnimg.cn/F/7/3/3_joyyi9"),
              fit: BoxFit.cover)),
    ));

三、ListView

(new) ListView ListView({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController? controller,
  bool? primary,
  ScrollPhysics? physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry? padding,
  double? itemExtent,
  Widget? prototypeItem,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  bool addSemanticIndexes = true,
  double? cacheExtent,
  List<Widget> children = const <Widget>[],
  int? semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
})
(new) ListView ListView.builder({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController? controller,
  bool? primary,
  ScrollPhysics? physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry? padding,
  double? itemExtent,
  Widget? prototypeItem,
  required Widget Function(BuildContext, int) itemBuilder,
  int? itemCount,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  bool addSemanticIndexes = true,
  double? cacheExtent,
  int? semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
})
ListView(
        scrollDirection: Axis.vertical,
        children: <Widget>[
          Container(
            height: 180.0,
            color: Colors.red,
          ),
          Container(
            height: 180.0,
            color: Colors.orange,
          ),
          Container(
            height: 180.0,
            color: Colors.blue,
          ),
          Container(
            height: 180.0,
            color: Colors.deepOrange,
          ),
          Container(
            height: 180.0,
            color: Colors.deepPurpleAccent,
          ),
        ],
      ),
ListView(
      padding: const EdgeInsets.all(10),
      children: const <Widget>[   
          ListTile(
              leading:Icon(Icons.settings,size:40),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),
          ListTile(              
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
              trailing:Icon(Icons.home),
          ),
          ListTile(
              leading:Image.network("https://profile.csdnimg.cn/F/7/3/3_joyyi9"),
              title: Text('华北黄淮高温雨今起强势登场'),
              subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
          ),       
      ],
    )
 Image.network("https://www.itying.com/images/flutter/1.png"),
 Container(
   child: Text(
     '我是一个标题',
     textAlign: TextAlign.center,
     style: TextStyle(
       fontSize: 28,
     ),
   ),
   height: 60,
   padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
 ),

listview动态传入
listData .dart

List listData = [
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
  },
  {
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
  },
  {
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
  },
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
  },
  {
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
  },
  {
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
  }
];


Widget _getListData(context,index){
        return ListTile(           
            title: Text(listData[index]["title"]),
            leading:Image.network(listData[index]["imageUrl"]),          
            subtitle:Text(listData[index]["author"])
        );
  }

  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView.builder(
        itemCount:listData.length,
        itemBuilder:this._getListData
    );
  }
 ///-----------------------------
 //自定义方法
  List<Widget> _getData(){
    return [
        ListTile(
          title: Text("我是一个列表"),
        ),
         ListTile(
          title: Text("我是一个列表"),
        ),
         ListTile(
          title: Text("我是一个列表"),
        )
      ];
  }
  //自定义方法
  List<Widget> _getData(){    
    List<Widget> list=[];
    for(var i=0;i<20;i++){
      list.add(ListTile(
          title: Text("我是$i列表"),
      ));
    }    
    return list;
  }
	//自定义方法
  List<Widget> _getData(){      
    var tempList=listData.map((value){
        return ListTile(
          leading:Image.network(value["imageUrl"]),
          title:Text(value["title"]),
          subtitle:Text(value["author"])
        );
    });
    // ('124124','124214')
    return tempList.toList();
  }
  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView(
      children: this._getData(),
    );
  }
 ///-----------------------------
   List list=[];
  HomeContent(){
     for(var i=0;i<20;i++){
        this.list.add('我是第$i条');
      }
  }  
  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView.builder(
        itemCount:this.list.length,
        itemBuilder:(context,index){
          return ListTile(
            title: Text(this.list[index]),
          );
        }
    );
  }

 //自定义方法
  Widget _getListData(context,index){
        return ListTile(           
            title: Text(listData[index]["title"]),
            leading:Image.network(listData[index]["imageUrl"]),          
            subtitle:Text(listData[index]["author"])
        );
  }

  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView.builder(
        itemCount:listData.length,
        itemBuilder:this._getListData
    );
  }
}

四、GridView

new) GridView GridView.builder({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController? controller,
  bool? primary,
  ScrollPhysics? physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry? padding,
  required SliverGridDelegate gridDelegate,
  required Widget Function(BuildContext, int) itemBuilder,
  int? itemCount,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  bool addSemanticIndexes = true,
  double? cacheExtent,
  int? semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
})

Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          SizedBox(height: 12),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontSize: 10),
          )
        ],
      ),
      decoration: BoxDecoration(
          border:
              Border.all(color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
      // height: 400,  //设置高度没有反应
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      //注意
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, //水平子 Widget 之间间距
        mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
        crossAxisCount: 2, //一行的 Widget 数量
      ),
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }

@override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 4, //一行的 Widget 数量
      children: const <Widget>[
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本')
      ],
    );
  }

 List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        child: Text(
          '这是第$i条数据',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        color: Colors.red,
        // height: 400,  //设置高度没有反应
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 20.0, //水平子 Widget 之间间距
      mainAxisSpacing: 20.0, //垂直子 Widget 之间间距
      padding: EdgeInsets.all(10),
      crossAxisCount: 2, //一行的 Widget 数量
      childAspectRatio: 0.7, //宽度和高度的比例
      children: this._getListData(),
    );
  }

List<Widget> _getListData() {
      var tempList=listData.map((value){
          return Container(            
            child:Column(
                children: <Widget>[
                  Image.network(value['imageUrl']),
                  SizedBox(height: 12),
                  Text(
                    value['title'],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20
                    ),
                  )
                ],

            ),
            decoration: BoxDecoration(

              border: Border.all(
                color:Color.fromRGBO(233, 233,233, 0.9),
                width: 1
              )
            ),
              
            // height: 400,  //设置高度没有反应
          );

      });
      // ('xxx','xxx')
      return tempList.toList();
  }


  @override
  Widget build(BuildContext context) {    
    return GridView.count(
        crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,  //一行的 Widget 数量
        // childAspectRatio:0.7,  //宽度和高度的比例
        children: this._getListData(),
    );
  }

总结

赶快加大进度！