我如何在Flutter中设计这个UI

dsekswqp 于 2023-05-19 发布在 Flutter

关注(0)|答案(2)|浏览(117)

我想在Flutter中设计这个部分：但是，有一个问题，无论我做什么，不同的部分保持重叠和小部件的放置不正确。

我做的最后一次尝试是：

`class TransactionTracker extends StatelessWidget {
  // final Color circleColor;
  // TransactionTracker({required this.circleColor});
  //
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    SizedBox(
                      height: 60,
                      child: CircleAvatar(
                        radius: 20,
                        backgroundColor: Colors.white,
                        child: Icon(Icons.download),
                      ),
                    ),
                    Positioned(
                      bottom: -20,
                      child: Text(
                        'Text below CircleAvatar',
                        style: regularTextStyle,
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 5,
                  width: 50,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
                SizedBox(
                  height: 5,
                  width: 50,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
                SizedBox(
                  height: 5,
                  width: 50,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'Awaiting\n Deposit',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Awaiting\n Confirmation',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Perform\n Exchange',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Done',
                  style: regularTextStyle.copyWith(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
              ],
            )
          ]),
    );
  }
}`

当我使用我提供的代码时，输出不是我所期望的，每个圆圈下的文本没有正确对齐
更新：

class TransactionTracker extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: SizedBox(
                  height: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
              Flexible(
                child: SizedBox(
                  height: 5,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
              ),
              Expanded(
                child: SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
              Flexible(
                child: SizedBox(
                  height: 5,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
              ),
              Expanded(
                child: SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
              Flexible(
                child: SizedBox(
                  height: 5,
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white),
                  ),
                ),
              ),
              Expanded(
                child: SizedBox(
                  height: 39,
                  width: 39,
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.download),
                  ),
                ),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: Text(
                    'Awaiting\n Deposit',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
                Expanded(child: SizedBox()),
                Expanded(
                  child: Text(
                    'Awaiting\n Confirmation',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
                Expanded(child: SizedBox()),
                Expanded(
                  child: Text(
                    'Perform Exchange',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
                Expanded(child: SizedBox()),
                Expanded(
                  child: Text(
                    'Done',
                    style: regularTextStyle.copyWith(fontSize: 12),
                    textAlign: TextAlign.center,
                    maxLines: 2,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

但文本并没有完全显示

flutter

来源：https://stackoverflow.com/questions/76227174/how-can-i-design-this-ui-in-flutter

2条答案

按热度按时间

f45qwnt81#

你应该使用布局相关的小部件，如扩展等，你可以测试这段代码：

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TransactionTracker(),
      ),
    );
  }
}

class TransactionTracker extends StatelessWidget {
  // final Color circleColor;
  // TransactionTracker({required this.circleColor});
  //
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              height: 60,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
            Expanded(
              child: SizedBox(
                height: 5,
                child: Container(
                  decoration: const BoxDecoration(color: Colors.blue),
                ),
              ),
            ),
            const SizedBox(
              height: 45,
              width: 65,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
            Expanded(
              child: SizedBox(
                height: 5,
                child: Container(
                  decoration: const BoxDecoration(color: Colors.blue),
                ),
              ),
            ),
            const SizedBox(
              height: 45,
              width: 65,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
            Expanded(
              child: SizedBox(
                height: 5,
                child: Container(
                  decoration: const BoxDecoration(color: Colors.blue),
                ),
              ),
            ),
            const SizedBox(
              height: 45,
              width: 65,
              child: CircleAvatar(
                radius: 40,
                backgroundColor: Colors.blue,
                child: Icon(Icons.download),
              ),
            ),
          ],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              width: 65,
              child: Text(
                'Awaiting\n Deposit',
                textAlign: TextAlign.center,
              ),
            ),
            const Expanded(child: SizedBox()),
            const SizedBox(
              width: 65,
              child: Text(
                'Awaiting\n Confirmation',
                textAlign: TextAlign.center,
              ),
            ),
            const Expanded(child: SizedBox()),
            const SizedBox(
              width: 65,
              child: Text(
                'Perform\n Exchange',
                textAlign: TextAlign.center,
              ),
            ),
            const Expanded(child: SizedBox()),
            const SizedBox(
              width: 65,
              child: Text(
                'Done',
                textAlign: TextAlign.center,
              ),
            ),
          ],
        )
      ]),
    );
  }
}

赞(0）回复(0）举报 2023-05-19

tmb3ates2#

你的圆形图像和下面的文字应该被包裹在一个小部件，然后只有你可以得到proepr对齐
或
在所有文本小部件之间使用Spacer()小部件

赞(0）回复(0）举报 2023-05-19