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---------------
  • 相关阅读:
    不记住密码
    在Docker中进行Redis主从配置
    Spring Boot系列(8)——RabbitMQ确认、退回模式及死信队列
    RabbitMQ基础
    CentOS只有lo和ens33网卡的解决方案
    Spring Boot系列(7)——自定义异常反馈
    Spring Boot系列(6)——Configurer和Customizer
    以form表单重用方式进行数据列表行删除
    Spring Boot系列(5)——Restful CURD注意事项
    Spring Boot系列(4)——实现国际化
  • 原文地址:https://www.cnblogs.com/supersr/p/13925764.html
Copyright © 2011-2022 走看看