import 'package:flutter/material.dart';import 'package:flutter/cupertino.dart'; void main() { runApp(new MyApp());} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter TabBar', home: new Home(), theme: new ThemeData(primaryColor: Colors.black), ); } } class Home extends StatefulWidget { @override _HomeState createState() => new _HomeState();} class _HomeState extends State<Home> with TickerProviderStateMixin { TabController tabController; @override Widget build(BuildContext context) { tabController = new TabController(length: 2, vsync: this); var tabBarItem = new TabBar( tabs: [ new Tab( icon: new Icon(Icons.list), ), new Tab( icon: new Icon(Icons.grid_on), ), ], controller: tabController, indicatorColor: Colors.white, ); var listItem = new ListView.builder( itemCount: 20, itemBuilder: (BuildContext context, int index) { return new ListTile( title: new Card( elevation: 5.0, child: new Container( alignment: Alignment.center, //margin: new EdgeInsets.only(top: 10.0, bottom: 10.0), child: new Text("ListItem $index"), ), ), onTap: () { showDialog( barrierDismissible: false, context: context, child: new CupertinoAlertDialog( title: new Column( children: <Widget>[ new Text("ListView"), new Icon( Icons.favorite, color: Colors.red, ), ], ), content: new Text("Selected Item $index"), actions: <Widget>[ new FlatButton( onPressed: () { Navigator.of(context).pop(); }, child: new Text("OK")) ], )); }, ); }, ); ////////////// final List<String> items = <String>[ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", ]; //calc int crossAxisCount = 3; // số item mỗi hàng double crossAxisSpacing = 4.0; //chiều ngang double mainAxisSpacing = 4.0; //chiều dọc double widthScreen = MediaQuery.of(context).size.width; // độ rộng màn hình double imageItemHeight = (widthScreen - 8.0) * 1.4 / crossAxisCount; // chiều cao ảnh: cao/rộng=1.4 double titleHeight = 50.0; // chiều cao tiêu đề double cardViewDefaultPadding = 4.0 * 2; // trên và dưới double allContainerHeight = imageItemHeight + titleHeight + cardViewDefaultPadding; double childAspectRatio; // tỉ lệ GridView Widget itemGridView() { return new GestureDetector( child: new Card( elevation: 5.0, child: new Column( children: <Widget>[ Container( width: MediaQuery.of(context).size.width, height: imageItemHeight, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: AssetImage('images/demo.jpg'), ), ), ), new Container( height: titleHeight, //padding: EdgeInsets.only(top: 50.0, bottom: 90.0), color: Colors.red, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'TITLE', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, ), ), ], ), ), ], ), ), onTap: () { showDialog( barrierDismissible: false, context: context, child: new CupertinoAlertDialog( title: new Column( children: <Widget>[ new Text("GridView"), new Icon( Icons.favorite, color: Colors.green, ), ], ), content: new Text("Selected Item"), //new Text("Selected Item $index"), actions: <Widget>[ new FlatButton( onPressed: () { Navigator.of(context).pop(); }, child: new Text("OK")) ], ), ); }, ); } Widget gridView2() { //Công thức tính tỉ lệ childAspectRatio = ((MediaQuery.of(context).size.width - crossAxisSpacing * (crossAxisCount - 1)) / crossAxisCount) / allContainerHeight; print('Tỷ lệ: $childAspectRatio'); return GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: mainAxisSpacing, crossAxisSpacing: crossAxisSpacing, childAspectRatio: childAspectRatio, //0.569171235, ), itemCount: items.length, itemBuilder: (context, index) { return GridTile(child: itemGridView()); }, ); } return new DefaultTabController( length: 2, child: new Scaffold( backgroundColor: Colors.blueGrey, appBar: new AppBar( title: new Text("Flutter TabBar"), bottom: tabBarItem, ), body: new TabBarView( controller: tabController, children: [ listItem, gridView2(), ], ), ), ); } }
Thứ Năm, 29 tháng 8, 2019
Tính tỉ lệ khi dùng GridView + CardView trong flutter
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét