Padding: EdgeInserts |不移动部件？

Question

我正在尝试将文本定位为更靠近左边缘，而不是靠近中心。

在使用flutter的研究中，似乎正确的方法是使用const EdgeInserts

然而，当使用常量边缘插入时，我页面上的文本只会以极小的量改变位置，这几乎不会引起注意。我是不是对下面的代码做错了什么？

Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 10, bottom: 50),
                child: Text(
                  'Some Text',
                  style: TextStyle(
                    fontSize: 24,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,

这是一个正在发生的事情的样本，与我想要的相比

​

​

为答案编辑：

class Onboarding1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Image.asset(
            "assets/Onboarding1_Photo.png",
            height: MediaQuery.of(context).size.height * 0.7,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10, bottom: 50),
                child: Text(
                  'Some Text',
                  style: TextStyle(
                    fontSize: 24,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,

Answer 1

要拉伸视图，可以添加到Column

crossAxisAlignment: CrossAxisAlignment.stretch,

具有不同填充和对齐方式的两个文本的完整示例：

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 300,
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 10,
                top: 30,
              ),
              child: Text(
                'Some Text',
                textAlign: TextAlign.left,
                style: TextStyle(
                  fontSize: 24,
                  fontFamily: 'Avenir',
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                right: 50,
                top: 30,
              ),
              child: Text(
                'Some Text',
                textAlign: TextAlign.right,
                style: TextStyle(
                  fontSize: 24,
                  fontFamily: 'Avenir',
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

结果：

​

Answer 2

具有两个嵌套的Columns的解决方案，在两者上都使用CrossAxisAlignment.start，在内部Column上使用一个Padding。

​

​

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Colosseo_2020.jpg/2560px-Colosseo_2020.jpg'),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Some Text',
                  style: TextStyle(
                    fontSize: 24,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
                ),
                const SizedBox(height: 16.0),
                Text('This is some text. This is some text.'),
                const SizedBox(height: 16.0),
                OutlineButton(
                  onPressed: () {},
                  child: Text('Continue'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 3

您可以从左侧开始添加crossAxisAlignment on Column小部件。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Padding(padding: const EdgeInsets.only(left: 10, bottom: 50),
      child: Text(""),
    )
  ],
)