Flutter:在ButtonBar中给两个按钮相等的宽度，并以动态高度显示长文本 [英] Flutter: Giving equal width to two buttons in a ButtonBar with dynamic height for long text

问题描述

因此，这是我的简单用例:我想水平放置两个按钮.在本机android(我来自哪里)中，我会将它们放置在LinearLayout中，并赋予它们每个权重1并将其高度设置为wrap_content.

So here's my simple use case: I want to have two buttons next to each other horizontally. In native android (which is where I come from) I would have placed them in a LinearLayout and given them weight 1 each and setting their height to wrap_content.

现在，我在ButtonBar小部件中放置了两个RaisedButton，但是在运行应用程序的地方，我看到第二个正在被裁剪.我希望它们等距分布，并根据其文本具有动态高度.我怎样才能在颤抖中达到相同的目的?以下是我到目前为止尝试过的内容:

Now, I have placed two RaisedButton in a ButtonBar widget but where I run the app I can see the second one is getting clipped. I want them to be equally spaced and have dynamic height as per their text. How can I achieve the same in flutter? Below is what I have tried so far:

import 'package:flutter/material.dart';

class NewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            automaticallyImplyLeading: true,
            title: Text("Building layouts"),
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => Navigator.pop(context, false),
            )),
        body: myLayoutWidget(),
      ),
    );
  }
}

// replace this method with code in the examples below
Widget myLayoutWidget() {
  return Container(
    child: Column(
      children: <Widget>[
        ButtonBar(
          children: <Widget>[
            RaisedButton(
              onPressed: () {},
              child: Text("Very long text button",),
            ),
            RaisedButton(
              child: Text("Very very very very long text button"),
              color: Colors.red,
              onPressed: () {},
            )
          ],
        ),
      ],
    ),
  );
}

这是现在的样子:

推荐答案

尝试使用行"而不是按钮栏"，然后将按钮添加到展开的父对象"

Try using Row instead of Button Bar and add buttons to Expanded parent

Widget myLayoutWidget() {
  return Container(
    child: Row(

      children: <Widget>[
        Expanded(
          child: RaisedButton(
            onPressed: () {},
            child: Text("Very long text button",),
          ),
        ),
        Expanded(
          child: RaisedButton(
            child: Text("Very very very very long text button"),
            color: Colors.red,
            onPressed: () {},
          ),
        )
      ],
    ),
  );
}

这篇关于Flutter:在ButtonBar中给两个按钮相等的宽度，并以动态高度显示长文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！