Flutter 之旅（三） —— 常用控件記錄

Flutter 之旅（三） —— 常用控件記錄

將Flutter 中一些，常用的控件以及常用參數做一下記錄
方便之後忘記了查詢
學會這些控件，我們就可以嘗試着去構建一些簡單的頁面啦！！

一，Text Weight

          child: Text(
              'hellowidget1asda123123123asdasdasd123sdasdasdasdasdasdasdasdasdasdasd',
            textAlign: TextAlign.right,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style:TextStyle(
              fontSize:25.0,
              color:Color(0xFF000000),
              decoration: TextDecoration.underline,
              decorationColor: Color.fromARGB(255, 255, 125, 100),
              decorationStyle: TextDecorationStyle.double,
            )
          ),

二， Container

            child: Container(
                child: const Text('hellow'),
                alignment: Alignment.topLeft,
                //控制 Container 內部元素位置
                width: 700.0,
                height: 300.0,
//                color: Colors.lightBlue,
                padding:const EdgeInsets.fromLTRB(10,30,0,0),
                margin:const EdgeInsets.all(10.0),
                decoration: BoxDecoration(
                gradient:const LinearGradient( //添加漸變色 ！！與上邊的color不能同時用
                    colors:[Colors.lightBlue,Colors.lightGreen,Colors.purple]
                ),
                border:Border.all(width: 5.0,color:Colors.red) //邊框
              ),

三，Image

加載靜態資源

• pubspec.yaml 中

  	 assets:

     images/img_local_top_bg.png 

• 使用

  Image.asset("images/img_local_top_bg.png")
  

綜合使用

            child: Container(
              child:Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584363604024&di=f6fd221656de91b302e9e2681074edb4&imgtype=0&src=http%3A%2F%2Fpic.k73.com%2Fup%2Fsoft%2F2020%2F0316%2F114132_43371023.png',
//              fit:BoxFit.fitHeight, //填充關係
                repeat: ImageRepeat.repeatY, //複用  （不能跟fit一起使用）
                color:Colors.greenAccent,
                colorBlendMode:BlendMode.modulate, //顏色疊加模式
              ),
            width:200.0,
            height: 300.0,
              color:Colors.lightBlue
            ),

四，ListView

豎直 ListView -1

        body:  ListView(
          children: <Widget>[
             ListTile(
              leading: Icon(Icons.perm_camera_mic),
              title:Text('perm_camera_mic'),
            ),
            Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584363604024&di=f6fd221656de91b302e9e2681074edb4&imgtype=0&src=http%3A%2F%2Fpic.k73.com%2Fup%2Fsoft%2F2020%2F0316%2F114132_43371023.png'
            ),
            ListTile(
              leading: Icon(Icons.perm_camera_mic),
              title:Text('perm_camera_mic'),
            ),

          ],
        ),

水平 ListView -2

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView(
       scrollDirection: Axis.horizontal,
      children: <Widget>[
         Container(
          width: 180.0,
           color:Colors.lightBlue
        ),
        Container(
            width: 180.0,
            color:Colors.lightGreen
        ),
        Container(
            width: 180.0,
            color:Colors.deepOrange
        ),
        Container(
            width: 180.0,
            color:Colors.black
        ),
        Container(
            width: 180.0,
            color:Colors.purple
        ),
      ],
    );
  }
}

五 GirdView

        body: GridView.count(
          padding: const EdgeInsets.all(20.0),
          crossAxisSpacing: 10.0, //item 間距
          crossAxisCount: 2, //每行的數量
          children:  <Widget>[
            const Text('I am zyg'),
            const Text('我喜歡看書'),
            const Text('我喜歡看電影'),
            const Text('我喜歡玩遊戲'),
            const Text('我喜歡馳火鍋'),
          ],
        )

        body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing:20.0,  //主軸的間距
            crossAxisSpacing: 20.0, //輔軸的間距
            childAspectRatio: 1.0, // item 的寬高比
          ),
          padding: EdgeInsets.all(20.0),
          children: <Widget>[
            new Image.network("http://img5.mtime.cn/CMS/News/2020/03/18/083236.46390608_620X620.jpg",fit: BoxFit.cover),
            new Image.network("http://img5.mtime.cn/CMS/News/2020/03/18/083236.46390608_620X620.jpg",fit: BoxFit.cover),
            new Image.network("http://img5.mtime.cn/CMS/News/2020/03/18/083236.46390608_620X620.jpg",fit: BoxFit.cover),
            new Image.network("http://img5.mtime.cn/CMS/News/2020/03/18/083236.46390608_620X620.jpg",fit: BoxFit.cover),
            new Image.network("http://img5.mtime.cn/CMS/News/2020/03/18/083236.46390608_620X620.jpg",fit: BoxFit.cover),
            new Image.network("http://img5.mtime.cn/CMS/News/2020/03/18/083236.46390608_620X620.jpg",fit: BoxFit.cover),
          ],
        )

六 Row

Expanded： 需要靈活佈局的 外面包裹 Expanded

普通佈局就是按照：內容大小顯示

        body: new Row(
          children: <Widget>[
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.redAccent,
              child: new Text('Red Button'),
            ),),
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.blueAccent,
              child: new Text('Red Button'),
            ),flex: 2,),
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.orangeAccent,
              child: new Text('Red Button'),
            ),),
            Expanded(child: new RaisedButton(
              onPressed: (){},
              color: Colors.brown,
              child: new Text('Red Button'),
            ),),
          ],
        )

七 Column

          appBar: new AppBar(
            title: new Text('垂直方向'),
          ),
          body: Center(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('fffff'),
              Expanded(child: Text('adasdasasdasddasd')),
              Text('jjjjjjjjjjj'),
              Text('lllllllllllll'),
            ],
          ))),

八 Stack （層疊佈局）+ Positioned

Positioned 組件是不受 alignment 影響的

      alignment: const FractionalOffset(0.5, 0.8), // x 軸 y 軸（0-1）
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage('http://img5.mtime.cn/CMS/News/2020/03/18/083236.46390608_620X620.jpg'),
          radius: 100.0,
        ),
         Positioned(
           top:10.0,
           left:10.0,
           child: Text('1111111'),
         ),
        Positioned(
          bottom:10.0,
          right:10.0,
          child: Text('22222'),
        ),
         Container(
         decoration:  BoxDecoration(
           color:Colors.lightBlue,
         ),
           padding: EdgeInsets.all(5.0),
           child: Text("hahahhahah"),
        )
      ],
    );

九 Card

 var card = Card(
    child: ListView(
      children: <Widget>[
        ListTile(
          title: Text('11111',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('22222'),
          leading: Text('3333333'),
        ),
        new Divider(color:Colors.orangeAccent),

        ListTile(
          title: Text('11111',style: TextStyle(fontWeight: FontWeight.w500),),
          subtitle: Text('22222'),
          leading: Text('3333333'),
        ),
        new Divider(color:Colors.orangeAccent),
      ],
    ),

  );

十 ListView 點擊 跳轉 詳情頁

void main() {
  runApp(MaterialApp(
    home: ProductList(
        prodcuts:List.generate(
            20, (it)=>Product('ZHY00商品$it','這是一個商品詳情：$it')
        )
    ),
  ));
}

class ProductList extends StatelessWidget {
  ProductList({Key key,@required this.prodcuts}) : super(key: key);
  final List<Product> prodcuts;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar:AppBar(title: Text('商品列表')),
      body: ListView.builder(
          itemCount: prodcuts.length, // 列表長度
          itemBuilder: (context,index){ // 寫item 樣式 （類似Android listView 中的 getView()）
            return ListTile(
              title: Text(prodcuts[index].description),
              onTap: (){ //點擊響應事件
                Navigator.push(context, MaterialPageRoute(
                  builder: (context) =>
                      ProductDetail(product:prodcuts[index])
                ));
              },
            );
          }),
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key,this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}

工欲善其事，必先利其器 (AS下使用)

在給大家介紹級框 Flutter 好用的插件吧！

01 Flutter Enhancement Suite Flutter 代碼增強提示
02 WidgetGenerator 自動生成Widget接口 （command + n）
03**flutter-img-sync 自動同步照片路徑 ** （tool => flutter-img-sync ）