flutter-具有不等重元素的行

Question

我有一排横跨屏幕宽度的行，带有三个按钮和一个等距间隔的文本（flex = 1）。我希望文本与屏幕的中心和两端的按钮对齐。这可能吗？

Answer 1

有几种方法。我能想到的最简单的方法是使用SizedBox小部件。

在您的示例中，您可以使用SizedBox小部件并添加一个其他框，其尺寸与左侧的左键相同。 SizedBox将占据该空间，但不会在屏幕上呈现。

Answer 2

嘿，请检查下面的代码，我认为它可以满足您的要求：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter buttons demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  List<int> values = [1, 2, 3];

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Buttons demo'),
          centerTitle: true,
        ),
        body: Row(
          children: <Widget>[
            Flexible(
              child: Container(
                color: Colors.redAccent,
                child: FlatButton(
                  onPressed: () => {},
                  child: Text('Button'),
                ),
              ),
            ),
            Expanded(
                flex: 2,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Some text',
                    textAlign: TextAlign.right,
                  ),
                )),
            Flexible(
              child: Container(
                color: Colors.green,
                child: FlatButton(
                  onPressed: () => {},
                  child: Text('Button'),
                ),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.purple,
                child: FlatButton(
                  onPressed: () => {},
                  child: Text('Button'),
                ),
              ),
            ),
          ],
        ));
  }
}

Answer 3

要使子项在此小部件的主轴方向上扩展以填充可用空间，请将子项包装在扩展的小部件中。

因此您可以尝试Expanded并在第二个Flex小部件中声明Expanded。

解决方案>>

          Row(
            children: <Widget>[
              Expanded(child: Container(padding: EdgeInsets.all(16),color: Colors.red,child: Text("text 1"))),
              Expanded(flex: 3,child: Container(padding: EdgeInsets.all(16),color: Colors.blue,child: Text("text 2"))),
              Expanded(child: Container(padding: EdgeInsets.all(16),color: Colors.yellow,child: Text("text 3"))),
              Expanded(child: Container(padding: EdgeInsets.all(16),color: Colors.green,child: Text("text 4"))),
            ],
          ),

输出：