【问题标题】:how to make the flex in box flutter to be centered each rows if the one text row long?如果一个文本行很长,如何使盒子中的弹性颤动以使每一行居中?
【发布时间】:2020-08-01 14:57:32
【问题描述】:

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

这是我的盒子列表代码

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)
            )
          ],
        ),
      )
    );
  }
}

这是我的预期:

the result box I want

我错过了什么吗?或者我应该使用 Stack 还是其他什么?

【问题讨论】:

    标签: android ios flutter flutter-layout


    【解决方案1】:

    试试这个

    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,
              )
            ],
          ),
        );
      }
    }
    

    输出

    【讨论】:

    • 这不会影响不同的宽度和高度吗?好吧,你的回答是我想要的结果,但是如果我让按钮文本变长,按钮和左侧文本之间几乎与我接近,我们应该使用填充吗?还是边距?
    • @WeqIou 使用保证金
    • 我应该把边距放在哪里?
    猜你喜欢
    • 2022-11-19
    • 2019-01-06
    • 1970-01-01
    • 2019-04-30
    • 1970-01-01
    • 1970-01-01
    • 2015-08-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多