1、第一个布局
import 'package:flutter/material.dart'; // Uncomment lines 7 and 10 to view the visual layout at runtime. // import 'package:flutter/rendering.dart' show debugPaintSizeEnabled; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { Widget titleSection = Container( padding: const EdgeInsets.only(bottom: 11,top: 11,left: 11), color: Colors.grey, child: Row( children: <Widget>[ /*1*/ Expanded(child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ /*2*/ Container( color: Colors.lightGreen, padding: const EdgeInsets.only(top: 0,bottom: 8,left: 0), child: Text('text1',style: TextStyle(fontWeight: FontWeight.bold),), ), Text('text2',style: TextStyle(color: Colors.red[500]),), ], )), Container( height: 100, color: Colors.green, padding: const EdgeInsets.only(right: 0,top: 0), child: Icon(Icons.star,color: Colors.red[500],), ), Container( height: 60, color: Colors.greenAccent, padding: const EdgeInsets.only(right: 11,bottom: 0,left: 11), child: Text('413242342342',), ), ], ), ); var color = Theme.of(context).primaryColor; var bottonSection = Container( child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ _buildButtonColumn(color, Icons.call, 'CALL'), _buildButtonColumn(color, Icons.near_me, 'ROUTE'), _buildButtonColumn(color, Icons.share, 'SHARE'), ], ), ); var textSection = Container( padding: const EdgeInsets.all(32), child: Text( 'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese ' 'Alps. Situated 1,578 meters above sea level, it is one of the ' 'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a ' 'half-hour walk through pastures and pine forest, leads you to the ' 'lake, which warms to 20 degrees Celsius in the summer. Activities ' 'enjoyed here include rowing, and riding the summer toboggan run.', softWrap: true, ), ); return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('layout demo'), ), body: ListView( children: <Widget>[ Image.asset( 'assets/images/food05.jpeg', width: 600, height: 200, fit: BoxFit.cover, ), titleSection, bottonSection, textSection, ], ), ), ); } Column _buildButtonColumn(Color color,IconData icon, String label) { return Column( // mainAxisSize: MainAxisSize.min, // mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(icon,color: color,), Container( child: Text(label,style: TextStyle( fontSize: 12, fontWeight: FontWeight.w400, color: color ),), ), ], ); } }
-
添加调试
void main() { debugPaintSizeEnabled=true; runApp(MyApp()); }