flutter基础控件试手

1.text

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "djjjgg",
      home: Scaffold(
        appBar: AppBar(
          title: Text("111111111"),
          backgroundColor: Colors.red,
        ),
        body:Center(
          child: Text(
            "Hello world,Hello world,Hello world,Hello world,",
            textAlign: TextAlign.left,//对齐方式
            maxLines: 1,//最大行数
            //overflow: TextOverflow.fade,//上下渐变
            overflow: TextOverflow.ellipsis,//省略号
            style:TextStyle(
               fontSize: 25.0,//字体大小
               color: Color.fromRGBO(255, 0, 0, 0.5),//颜色
               //下划线设置
               decoration: TextDecoration.underline,
               decorationStyle: TextDecorationStyle.solid,
               decorationColor: Colors.blue
            ),
          ),
        ) ,
      ),
    );
  }
}

2.container

child: Container(
  child: Text(
    "234455",
    style:TextStyle(
      fontSize: 40.0
    ),
  ),
  alignment: Alignment.topRight,
  width: 500.0,
  height: 400.0,
  //内边距
  padding: EdgeInsets.fromLTRB(20.0, 10.0, 30.0, 50.0),
  //外边距
  margin:  EdgeInsets.all(10.0),
  //背景色  color 和 decoration 不能共存
  // color: Colors.lightBlue,
  decoration: BoxDecoration(
    gradient: LinearGradient(
       colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple],
    ),//渐变色
    border: Border.all(color: Colors.black45,width: 5.0)
  ),
)

3.image

child: Container(
  child: Image.network(
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571724389903&di=84e8a9028eb5264583c72ebcd63fca47&imgtype=0&src=http%3A%2F%2Fimages6.fanpop.com%2Fimage%2Fpolls%2F1185000%2F1185700_1361945250993_full.jpg%3Fv%3D1361945473",
    //填充模式
    fit: BoxFit.scaleDown,
    //蒙层颜色
    color: Colors.greenAccent,
    //渲染混合模式
    colorBlendMode: BlendMode.darken,
    //重复
    repeat: ImageRepeat.repeatX,
  ),
  width: 300,
  height: 500,
  color: Colors.lightBlue,
),

4.静态 listView

body:ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.access_alarm),
      title: Text("11111"),
    ),
    Image.network("https://timgsa.baidu.com/timg?image&quality=80&size=b
  ],
)

5.横向listView

body:Container(
  child: ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
           color: Colors.red,
           width: 300,
           height: 200,
        ),
        Container(
           color: Colors.black45,
           width: 300,
           height: 200,
        ),
        Container(
           color: Colors.blue,
           width: 300,
           height: 200,
        ),
      ],
  ),
   width: 900.0,
   height: 200.0,
)

5.动态listView

import 'package:flutter/material.dart';

void main() {
  List<String> items = ["111111","222222"];
  for (int i = 0;i<1000;i++) {
    items.add("$i");
  }
  runApp(MyApp(items: items,));
}

class MyApp extends StatelessWidget {
  final List<String> items;
  MyApp({Key key1,@required this.items}):super(key:key1);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "djjjgg",
      home: Scaffold(
        appBar: AppBar(
          title: Text("22222"),
          backgroundColor: Colors.red,
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context,index){
            return ListTile(
              title: Text("${items[index]}"),
            );
          },
        )
      ),
    );
  }
}

6.网格

body: GridView.count(
  padding: const EdgeInsets.all(20.0),//网格内边距
  crossAxisSpacing: 10.0,//网格间距
  crossAxisCount: 3,//每行网格数量
  children: <Widget>[
    const Text("1111"),
    const Text("2222"),
    const Text("3333"),
    const Text("4444"),
    const Text("5555"),
    const Text("6666"),
  ],
)

新写法

body: GridView(
  scrollDirection: Axis.horizontal,
  padding: EdgeInsets.all(10.0),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,//非滑动方向网格数
    mainAxisSpacing: 2.0,//滑动方向的间距
    crossAxisSpacing: 10.0,//非滑动方向间距
    childAspectRatio: 2  //非滑动方向与滑动方向网格比例
  ),
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.purple,
    ),
  ],
)

7.row布局 clomun布局

body: Row(
  children: <Widget>[
     //充满整行  Expanded
     Expanded(child: RaisedButton(
         onPressed: (){},
         color: Colors.redAccent,
         child: Text("button1"),
        )
     ),
     Expanded(child: RaisedButton(
         onPressed: (){},
         color: Colors.blue,
         child: Text("button2"),
        )
     ),
     Expanded(child: RaisedButton(
         onPressed: (){},
         color: Colors.purple,
         child: Text("button3"),
        )
     )
  ],
),

body:Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text("1111111"),
    //充满纵向
    Expanded(
      child:Text("2222222"),
    ),
    Text("3333333"),
    Text("4444444"),
  ],
)

8.层叠

  var stack  = Stack(
    alignment: FractionalOffset(0.5, 0.8),
    children: <Widget>[
        Container(
          color: Colors.red,
          width: 200,
          height: 300,
         ),
         //定位
         Positioned(
           top: 10.0,
           left: 10.0,
           width: 100,
           child: Text("188384585885595959595959599595959",maxLines: 100,),
         ),
         //定位
        Positioned(
           top: 80.0,
           left: 10.0,
           child: Text("234456"),
         )
    ],
  );