flutte頁面佈局四

AspectRatio 組件

AspectRatio 的做用是根據設置調整子元素 child 的寬高比。
AspectRatio 首先會在佈局限制條件容許的範圍內儘量的擴展,widget 的高度是由寬度和比率
aspectRatio 
決定的,相似於 BoxFit 中的 contain,按照固定比率去儘可能佔滿區域。若是在知足全部限制條件事後沒法找到一個可行的尺寸,AspectRatio 最終將會去優先適應佈局限制條件,而忽略所設置的比率。 
import 'package:flutter/material.dart';void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      child: AspectRatio(
        aspectRatio: 2.0/1.0,
        child: Container(
          color: Colors.red,
        ),
      ),

    );
  }
}

在上面的例子中,給組件的父級設置了寬度200,而後設置該組件的寬高比爲2:1,這樣就獲得了一個寬200,高100的容器,可是更多的時候,是用來作平鋪的。app

  

Card 組件 

Card 是卡片組件塊,內容能夠由大多數類型的 Widget 構成,Card 具備圓角和陰影,這讓它看起來有立體感。該組件有三個經常使用的可選參數:
  •  margin :外邊距
  • child:子組件
  • Shape :Card 的陰影效果,默認的陰影效果爲圓角的長方形邊。
class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
          Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                ListTile(
                  title:Text("張三",style: TextStyle(fontSize: 28)) ,
                  subtitle: Text("高級工程師"),
                ),
                ListTile(title:Text("電話:xxxxx") , ),
                ListTile(title:Text("地址:xxxxxx") ,)
              ],
            ),
          ),
          Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                ListTile(
                  title:Text("李四",style: TextStyle(fontSize: 28)) ,
                  subtitle: Text("高級工程師"),
                ),
                ListTile(title:Text("電話:xxxxx") , ),
                ListTile(title:Text("地址:xxxxxx") ,)
              ],
            ),
          ),
          Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                ListTile(
                  title:Text("王五",style: TextStyle(fontSize: 28)) ,
                  subtitle: Text("高級工程師"),
                ),
                ListTile(title:Text("電話:xxxxx") , ),
                ListTile(title:Text("地址:xxxxxx") ,)
              ],
            ),
          ),
      ],
    );
  }
}

card下的圖文混排

class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
          "description": 'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
          "description": 'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
      },
  ];
    return ListView(
      children: listData.map((value){
        return Card(
          margin: EdgeInsets.all(10),
          child:Column(
              children: <Widget>[
                  AspectRatio(
                    aspectRatio: 20/9,
                    child: Image.network(value["imageUrl"],fit: BoxFit.cover,),
                  ),
                  ListTile(
                    leading: CircleAvatar(
                      backgroundImage:NetworkImage(value["imageUrl"])
                    ),
                    title: Text(value["title"]),
                    subtitle: Text(value["description"],maxLines: 1,overflow: TextOverflow.ellipsis),                    
                  )
              ],
          ),

        );

      }).toList(),
    );
  }
}
相關文章
相關標籤/搜索