首页 > 解决方案 > 如果一个文本行很长,如何使盒子中的弹性颤动以使每一行居中?

问题描述

我有盒子列表,它们并不是很小或不在中间的右边,尤其是食物的名称,因为它们太长了,在上面腾出了更多空间,

这是我的盒子列表代码

class CategoryMeals extends StatelessWidget {
  final String title;
  final String image;

  CategoryMeals({this.title, this.image});

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15)
      ),
      elevation: 14,
      margin: EdgeInsets.all(14),
      child: Container(
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Flexible(
              fit: FlexFit.tight,
              flex: 2,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: Text(title)
                  ),
                  Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: Container(
                        padding: const EdgeInsets.all(8.0),
                        margin: const EdgeInsets.only(right: 10),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Text("Button 1"),
                            Text("Button button 2")
                          ],
                        ),
                      )
                  )
                ],
              )
            ),
            Flexible(
                flex: 1,
                child: Image.asset(image)
            )
          ],
        ),
      )
    );
  }
}

这是我的预期:

我想要的结果框

我想念什么吗?或者我应该使用 Stack 还是其他什么?

标签: androidiosflutterflutter-layout

解决方案


尝试这个

class CategoryMeals extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black,width: 1),
        color: Colors.white,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(child: Text("askNilesh is here to help you",textAlign: TextAlign.center,)),
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[Text("Button 1",textAlign: TextAlign.center), Text("Button 2",textAlign: TextAlign.center)],
            ),
          ),
          FlutterLogo(
            size: 20,
          )
        ],
      ),
    );
  }
}

输出

在此处输入图像描述


推荐阅读