时间戳

首页 > 解决方案 > 如何在 Flutter 中使用拉伸文本和两个类似按钮的视图重新创建布局？

flutter - 如何在 Flutter 中使用拉伸文本和两个类似按钮的视图重新创建布局？

问题描述

我正在将用 Kotlin 编写的应用程序重写为 Flutter，但我正在努力重新创建下图所示的布局。

科特林： 科特林

扑： 扑

我希望最大的文本一直向下拉伸，并且我希望有两个具有给定颜色的类似按钮的视图，但我不知道如何重新创建它。文本应该是响应式的，就像在我的 Kotlin 布局中一样，当我在 18:9 屏幕上打开它时，文本应该大于 16:9。

如果有人可以帮助我，我会非常高兴！

代码：

import 'package:flutter/material.dart';

class GeneratedCouponScreen extends StatelessWidget {
  @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: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('DATA WYDANIA:', style: TextStyle(color: Colors.black)),
                      Text('10/09/2019', style: TextStyle(color: Colors.black))
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('UNIKALNY KOD', style: TextStyle(color: Colors.black)),
                      Text('e-86-tC-9', style: TextStyle(color: Colors.black),)
                    ],
                  )
                ],
              ),
              Column(
                children: [
                  SizedBox(height: 8.0),
                  Image.asset('assets/images/coupon_hamburger.png'),
                  Text('blablafjafjjaffjafaafafjjfajjfjafafjajfafjajffjafjafjafjafjafjafjafjffjfjsigsuhgurghsrgshgrghwrughsrugsrhruighghgugrhgirghwruighgwruighwuighwgrigwrhugiwrughiwrugiwrghuwrughguhgrugrhiafaifafijaefioefaioeiofaijafji', style: TextStyle(color: Colors.black),)
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

标签： flutterdart

解决方案

  1. 尝试使用 Container 包装文本字段并使用 margin 参数。例如：

    Container(child:Text('UNIKALNY KOD', style: TextStyle(color:colors.black)),margin:EdgeInsets.only(top:10,bottom:10));

  2. 要均匀分布主要 Column 元素，请在以下范围内使用此参数：

    mainAxisAlignment：MainAxisAlignment.spaceEvenly

希望能帮助到你。

推荐阅读