为什么我在Flutter中使用Column inside Row小部件创建布局时会遇到冲突

bq8i3lrv 于 2023-05-29 发布在 Flutter

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

在行中使用列构件时面临冲突。
嗨，我在Flutter中实现下面提到的设计，但下面的图像中提到的一些错误。
我不想使用任何外部软件包来学习。提前感谢您的帮助。
期望值：-Expected
现实：-Messed up layout
下面是我现在使用的代码片段。

upload_screen.dart

import 'package:flutter/material.dart';

class StepProgressBar extends StatelessWidget {
  const StepProgressBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Row(
      // mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      StepWithPlaceHolder(label: "1", title: "Choose File"),
      Expanded(child: Divider(thickness: 7,height: 5,)),
      StepWithPlaceHolder(label: "2", title: "Finish")
    ]);
  }
}

class StepWithPlaceHolder extends StatelessWidget {
  final String label;
  final String title;

  const StepWithPlaceHolder(
      {Key? key, required this.label, required this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 55,
          height: 55,
          decoration: BoxDecoration(
            border: Border.all(width: 2, style: BorderStyle.none),
            shape: BoxShape.circle,
            color: Colors.red,
          ),
          child: Center(
            child: Text(
              label,
              style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                  color: Colors.white),
            ),
          ),
        ),
        Text(
          title,
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 20,
            color: Colors.black,
          ),
        ),
      ],
    );
  }
}
}

flutter

来源：https://stackoverflow.com/questions/76357200/why-i-am-facing-conflict-while-using-column-inside-row-widget-for-creating-a-lay

2条答案

按热度按时间

kfgdxczn1#

用SizedBox将Row小部件 Package 成所需的高度。

SizedBox(
    height: 80,
    child: const Row(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
           //....
           Padding(
                padding: EdgeInsets.only(right: 10, bottom: 10), // for padding around Divider
                child:Divider(
                      thickness: 7,
                      height: 5,
                        ),
            ),
           // ....
           ],
        ),
    ),

输出：

***注意：***如果您想在它周围添加一些边距，请使用Container而不是SizedBox进行换行。

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

zy1mlcev2#

我试图使它动态，所以你只需要改变列表，以管理您的意见，这里是代码

import 'package:flutter/material.dart';

class StepProgressBar extends StatelessWidget {
  const StepProgressBar({Key? key}) : super(key: key);

  final list = const [{"label":"1","title":"Choose File"},{"label":"2","title":"Finish"}];

  @override
  Widget build(BuildContext context) {
    var widgets = <Widget>[];
    var textWidgets = <Widget>[];
    for(int counter=0;counter<list.length;counter++){
      var item = list[counter];
      if(counter != 0){
        textWidgets.add(Text(
          item["title"] ?? "",
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 20,
            color: Colors.black,
          ),
        ));
        widgets.add(
              Expanded(child: Divider(thickness: 7,height: 5,)),
        );
        widgets.add(StepWithPlaceHolder(label: item["label"] ?? "",));
      }else{
        textWidgets.add(Text(
          item["title"] ?? "",
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 20,
            color: Colors.black,
          ),
        ));
        widgets.add(StepWithPlaceHolder(label: item["label"] ?? "", ));
      }
    }
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: widgets
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: textWidgets,
            )
          ],
        ),
      ),
    );
  }
}

class StepWithPlaceHolder extends StatelessWidget {
  final String label;

  const StepWithPlaceHolder(
      {Key? key, required this.label})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 55,
          height: 55,
          margin: EdgeInsets.symmetric(horizontal: 10.0),
          decoration: BoxDecoration(
            border: Border.all(width: 2, style: BorderStyle.none),
            shape: BoxShape.circle,
            color: Colors.red,
          ),
          child: Center(
            child: Text(
              label,
              style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                  color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }
}

代码不是很优化，但你可以参考它

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

我来回答

为什么我在Flutter中使用Column inside Row小部件创建布局时会遇到冲突

2条答案

相关问题

热门标签

最新问答