Question

我正在将用Kotlin编写的应用程序重新编写为Flutter，但是我在简单的布局中苦苦挣扎。

我正在尝试通过Gmail重新创建布局，但是我不知道该如何放置某些内容。

这是来自Kotlin应用程序的图像： Kotlin

这是我的Flutter应用中的图片： Flutter

我说的是“胚轴”文本。我希望它与我的Kotlin应用程序完全一样。我希望其中的文本居中，并且要在“凭单”文本的确切高度上。有谁可以帮助我吗？

代码：

import 'package:flutter/material.dart';

class GeneratedMailCouponScreen extends StatelessWidget {
  final String couponImage;

  GeneratedMailCouponScreen({Key key, @required this.couponImage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Icon(
                        Icons.arrow_back
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Icon(
                        Icons.archive
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.delete
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.mail
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.more_vert
                      )
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                children: [
                  Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 20.0)),
                  SizedBox(width: 16.0,),
                  Container(
                    color: Colors.grey[300],
                    width: 50.0,
                    height: 8.0,
                    child: Center(
                      child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 8.0),),
                    )
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

在设备上测试后，这是我的解决方案
您只需要更改几行代码

// from
Container(
  color: Colors.grey[300],
  width: 50.0,
  height: 8.0,
  child: Center(
    child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 8.0),),
     )
   )

// to
Container(
      color: Colors.grey[300],
      child: Padding(
            padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
             child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 10.0),),
      )
   )

如何在Flutter的容器中放置此文本？

1 个答案: