zoukankan      html  css  js  c++  java
  • flutter实例1

    import 'package:flutter/material.dart';

    class LayoutPage extends StatefulWidget {
    @override
    _LayoutPageState createState() => _LayoutPageState();
    }

    class _LayoutPageState extends State<LayoutPage> {

    @override
    Widget build(BuildContext context) {

    // titleSection*
    Widget titleSection = Container(
    padding: const EdgeInsets.all(32.0),
    // color: Colors.red,
    child: Row(
    children: [
    Expanded(
    child: Column(

    // 左靠齐 Column + start
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
    Container(
    padding: const EdgeInsets.only(bottom: 8.0),
    child: Text(
    'If you have problems, you can check your code against lib/main.dart on GitHub.',
    style: TextStyle(fontWeight: FontWeight.bold),
    ),
    ),
    Text(
    'Kandersteg, Switzerland',
    style: TextStyle(color: Colors.grey),
    ),
    ],
    ),
    ),
    Icon(
    Icons.star,
    color: Colors.grey[500],
    ),
    Text('42'),
    ],
    ),
    );

    // buildButtonColumn
    Widget buildButtonColumn(IconData icon, String label) {
    Color color = Theme.of(context).primaryColor;
    return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
    Icon(
    icon,
    color: color,
    ),
    Container(
    child: Text(
    label,
    style: TextStyle(
    fontSize: 12.0, fontWeight: FontWeight.w400, color: color),
    ),
    )
    ],
    );
    }

    Widget buttonSetion = Container(
    child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
    buildButtonColumn(Icons.call, "CALL"),
    buildButtonColumn(Icons.near_me, "ROUTE"),
    buildButtonColumn(Icons.share,'SHARE'),
    ],
    ),
    );

    Widget textSection = Container(
    padding: const EdgeInsets.all(32.0),
    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 Scaffold(
    appBar: AppBar(
    title: Text('LayoutPage'),
    ),
    body: ListView(
    children: [
    Image.asset(
    'images/12.jpg',
    600,
    height: 240,
    fit: BoxFit.cover,
    ),
    titleSection,
    buttonSetion,
    textSection,

    ],
    ),
    );
    }
    }

    // ------------titleSection Start---------------
    // Widget titleSection = Container(
    // padding: const EdgeInsets.all(32.0),
    // // color: Colors.red,
    // child: Row(
    // children: [
    // Expanded(
    // child: Column(
    // crossAxisAlignment: CrossAxisAlignment.start,
    // children: [
    // Container(
    // padding: const EdgeInsets.only(bottom: 8.0),
    // child: Text(
    // 'If you have problems, you can check your code against lib/main.dart on GitHub.',
    // style: TextStyle(fontWeight: FontWeight.bold),
    // ),
    // ),
    // Text(
    // 'Kandersteg, Switzerland',
    // style: TextStyle(color: Colors.grey),
    // ),
    // ],
    // ),
    // ),
    // Icon(
    // Icons.star,
    // color: Colors.grey[500],
    // ),
    // Text('42'),
    // ],
    // ),
    // );
    // }
    // ------------titleSection End---------------

    // ------------buildButtonColumn Strat---------------

    // ------------buildButtonColumn End---------------
  • 相关阅读:
    随笔
    json对象的默认排序问题
    SQl死锁随想
    疑惑
    .netportal
    WCF中出现方法出现无法匹配的异常
    自动播放图片,可以调整速度。
    一个二级树形菜单,初始显示为全部展开,适用于分类较少的情况。
    整理了一下以后需要用的软件
    缩略图,大图,同页显示
  • 原文地址:https://www.cnblogs.com/supersr/p/13925764.html
Copyright © 2011-2022 走看看