如何在颤抖的容器中添加标签?不涉及应用栏

时间:2019-10-10 11:03:21

标签: flutter flutter-layout

我不熟悉flutter,因此决定创建一个项目,在其中尝试为我的项目实施flutter中的选项卡。这些选项卡不是导航选项卡,而是屏幕中的内容驱动选项卡。

以下是我尝试实现的设计模拟。 enter image description here

以下是代码的其余部分

import 'dart:async';

import 'package:flutter/material.dart';

class TimerPage extends StatefulWidget {
  TimerPage({Key key}) : super(key: key);

  TimerPageState createState() => new TimerPageState();
}

class TimerPageState extends State<TimerPage> {
  final items = <Widget>[
    ListTile(
      leading: Icon(Icons.photo_camera),
      title: Text('Camera'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.photo_library),
      title: Text('Select'),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.delete),
      title: Text('Delete'),
      onTap: () {},
    ),
    Divider(),
    if (true)
      ListTile(
        title: Text('Cancel'),
        onTap: () {},
      ),
  ];
  _showSheet() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext _) {
        return Container(
          child: Wrap(
            children: items,
          ),
        );
      },
      isScrollControlled: true,
    );
  }

  int _count = 20 * 60;

  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 1), (timer) {
      --_count;
      if (_count < 0)
        timer.cancel();
      else
        setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: <Widget>[
          IconButton(
              icon: Icon(
                Icons.pause_circle_outline,
                color: Colors.blue,
              ),
              onPressed: _showSheet),
          Text('${_formatSeconds(_count)}'),
          Spacer(),
          FlatButton(
              onPressed: _showSheet,
              child: Text(
                "Submit",
                style: TextStyle(
                  fontSize: 18,
                  fontFamily: 'lato',
                  color: Colors.blue,
                ),
              )),
        ],
      ),
      // Row(children: <Widget>[

      // ],)
    ]);
  }

  String _formatSeconds(int count) {
    int hours = count ~/ 3600;
    int secondsLeft = count - hours * 3600;
    int minutes = secondsLeft ~/ 60;
    int seconds = secondsLeft - minutes * 60;

    String formattedTime = "";
    if (minutes < 10) formattedTime += "0";
    formattedTime = "$minutes:";

    if (seconds < 10) formattedTime += "0";
    formattedTime += "$seconds";

    return formattedTime;
  }
}

该代码属于计时器并提交(模拟)。 在包含计时器的行下方,我要添加带有MCQ问题的问题选项卡。

0 个答案:

没有答案